具有相同ID的JQuery可拖动多个项目不起作用答案

【问题标题】：JQuery Draggable Multiple Items with the same id not working具有相同ID的JQuery可拖动多个项目不起作用
【发布时间】：2012-12-21 18:48:06
【问题描述】：

你需要给每个可拖动元素一个不同的名字吗？我有 3 张图像我希望能够拖动它们。我试图给他们所有相同的 ID，但它失败了。我将拥有可变数量的图像，因此我需要它们都具有相同的 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>

【问题讨论】：

标签： jquery jquery-ui drag-and-drop draggable

【解决方案1】：

你需要给他们不同的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）

【讨论】：

好的，谢谢！如果我想克隆，是否也需要所有可放置元素的 id？
这个问题有点含糊，所以我不知道如何回答...一般来说：无论您选择并说出.clone() on 都会被克隆，所以如果您只想克隆一件事只选择一件事（通过给相关的东西一个 id 并通过它进行选择，或者通过类选择并进行数组索引，或者 :first 或类似的东西）。听起来您可能还需要阅读 jquery 选择器 (w3schools.com/jquery/jquery_ref_selectors.asp)
它不会克隆。我不知道为什么。
“它”非常模糊。请提供更多信息。
我添加了我的代码。我想将克隆拖到可放置的框中。我的目标是在它们卡入到位后也能够移动它们。排序不是必需的，只是没有重叠，它们必须被捕捉到下拉框中。