Question

我有一个小小的＆＃39;在这个俱乐部继续进行节目，我有一个可以拖延的对象。如果我想能够拖动更多对象，但每个对象分别怎么办？我希望能够使用相同的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的JS函数中出现新的document.getElementById(" here ")：s吗？不必事先在那里写一堆id：s？我可以设置一个jQuery-thingy来附加东西，但是在JS函数中吗？

总结：如何在不给每个人提供拖拉功能的情况下拖动我的物体？

祝你好运！

Answer 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>

您还可以绑定到按钮的click事件，以将新元素添加到容器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

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

1 个答案: