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

Question

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

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

这样行吗？我可以像那样分别拖动每个对象，每个对象都有一个 id 吗？但是现在，棘手的部分是：如果我制作一个将附加（jQuery-附加）新对象的按钮，并通过附加为每个新对象提供一个新的 id 怎么办？。并且：我可以让新的 id:s 出现在 JS 函数中，在 document.getElementById(" here ") 中吗？不必事先在其中写一堆 id:s 吗？我可以设置一个 jQuery-thingy 来附加东西，但是在 JS 函数中吗？

总结一下：如何在不赋予每个对象自己的拖拽功能的情况下拖拽我的对象？

此致！

Answer 1

这可以使用 jQuery UI 可拖动 https://jqueryui.com/draggable/ 轻松完成。无需为每个元素分配一个 id，您可以使用 class 来完成此操作。对于动态添加的元素，您可以在附加元素时调用 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

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

Same Dynamic JS Function Handling Different Objects

javascript

jquery

append

dynamic