JQuery可拖動多個項目具有相同的ID不起作用

您是否需要爲每個可拖動元素指定不同的名稱？我有3張圖片，我希望能夠拖動它們。我試圖給他們所有相同的ID，但它失敗了。我將有可變數量的圖像，所以我需要它們都具有相同的ID。這裏出了什麼問題？JQuery可拖動多個項目具有相同的ID不起作用

這裏是我的代碼：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Draggable - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<style> 
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px solid black;} 
</style> 
<script> 
$(document).ready(function(){ 
    $("#draggable").draggable(); 
}); 
</script> 
</head> 
<body> 
<img id="draggable" src="small/Koala.jpg"/> 
<img id="draggable" src="small/Desert.jpg"/> 
<img id="draggable" src="small/Tulips.jpg"/> 
</body> 
</html>

現在不會克隆 - 我要克隆的圖像和克隆拖放到可投放箱。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Wall Builder</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
     .draggable { width: 85px; height: 85px; padding: 0.5em; border:1px solid black;} 
     .droppable { width: 150px; height: 150px; padding: 0.5em; border:1px solid black;} 
     </style> 
    <script> 
    $(document).ready(function() { 
     $(".draggable").draggable({ 
     revert: "invalid" 
     ,helper: 'clone' 
     }); 
     $(".droppable").droppable({ 
     accept: "draggable" 
     }); 
    }); 
    </script> 
</head> 
<body> 
<img class="draggable" id="1" src="small/Koala.jpg"/> 
<img class="draggable" id="2" src="small/Desert.jpg"/> 
<img class="draggable" id="3" src="small/Tulips.jpg"/> 
<div class="droppable" id="d1"></div> 
<div class="droppable" id="d2"></div> 
<div class="droppable" id="d3"></div> 
<div class="droppable" id="d4"></div> 
<div class="droppable" id="d5"></div> 

</body> 
</html>

來源

2012-12-21 user1261710

你需要給他們不同的ID，然後按類別選擇。 id的要點是不同的，如果有重複，jQuery將只選擇它找到的第一個。

喜歡的東西：

<script> 
$(document).ready(function(){ 
    $(".draggable").draggable(); 
}); 
</script> 
</head> 
<body> 
<img class="draggable" src="small/Koala.jpg"/> 
<img class="draggable" src="small/Desert.jpg"/> 
<img class="draggable" src="small/Tulips.jpg"/> 
</body> 
</html>

（聽起來像你可能想在the difference between ids and classes讀了）

來源

2012-12-21 18:49:27 Colleen

好的，謝謝！如果我想克隆，是否還需要所有可拖拽元素的ID？ – user1261710

這個問題有點模糊，所以我不知道如何回答...一般來說，無論你選擇，並說'.clone（）'上會被克隆，所以如果你只是想克隆一個東西只能選擇一件事（或者通過給與某個id相關的東西並選擇它，或者通過該類選擇並進行數組索引，或者：首先或類似的東西）。聽起來你可能還需要閱讀jQuery選擇器（http://www.w3schools.com/jquery/jquery_ref_selectors.asp） – Colleen

它不會克隆。我不知道爲什麼。 – user1261710

JQuery可拖動多個項目具有相同的ID不起作用

回答

相關問題