相同的动态 JS 函数处理不同的对象答案

【问题标题】：Same Dynamic JS Function Handling Different Objects相同的动态 JS 函数处理不同的对象
【发布时间】：2015-11-05 08:37:32
【问题描述】：

我在这个俱乐部有一个小程序，我有一个可以拖动的对象。如果我希望能够拖动更多对象，但每个对象都是分开的，该怎么办？我希望能够使用相同的 JS 函数来执行此操作，例如：

<div id="obj1" ... ></div>
<div id="obj2" ... ></div>
<div id="obj3" ... ></div>
           ...
<script> 
... 
function dragAround() { 
... 
document.getElementById("obj1, obj2, obj3")
... 
} </script>

这行得通吗？我可以像这样单独拖动每个对象，每个对象都有一个id吗？但是现在，到了棘手的部分：如果我制作一个按钮来追加（jQuery-append）新对象，并通过追加给每个新对象一个新的id 怎么办？并且：我可以让新的id:s 出现在JS 函数中，在document.getElementById(" here ") 中吗？不必事先在里面写一堆id:s？我可以设置一个 jQuery-thingy 来追加内容，但在 JS 函数中？

总结一下：我怎样才能在我的对象周围拖动而不给每个对象自己的拖动功能？

最好的问候！

【问题讨论】：

抱歉@DalHundal 不知道发生了什么。你的编辑可能很好，你能推荐一个新的（如果你想要他的点或东西）？

标签： javascript jquery dynamic append

【解决方案1】：

这可以使用 jQuery UI Draggable https://jqueryui.com/draggable/ 轻松完成。无需为每个元素分配 id，您可以使用类来完成此操作。对于动态添加的元素，您可以在追加时调用draggable() 函数。

假设 html 标记如下所示：

 <button id="addButton">Add New Square</button>

  <div class="container">
    <div class="draggable">Original</div>
    <div class="draggable">Original</div>
    <div class="draggable">Original</div>
  <div>

您可以使用此脚本将可拖动功能附加到现有元素：

<script>$(".draggable").draggable();</script>

还可以绑定按钮的点击事件，为容器div添加新元素。

<script>
$("#addButton").click(function() {
    var $newElement = $("<div class='draggable dynamic'>Dynamic</div>");

    $(".container").append($newElement);

    $newElement.draggable();
  });
</script>

你可以在这个 jsbin 中看到这个完整的代码：http://jsbin.com/tofazalute/edit?html,css,js,output

【讨论】：