javascript - 为什么 draggable 不适用于动态创建的元素？

Question

我的可拖动元素是动态创建的。每次我添加一个项目时，我都会再次调用 draggable() 。他们获得可拖动的类，但不要拖动。

将 draggable 写入调试控制台时，它成功地处理了非动态元素。

$(window).on('load', function () {
    var item = '<div class="item"></div>';
    $field.append(item);
    dragItems();

});

function dragItems() {
    var $items = $('.item');

    $items.draggable();

}

在检查器中，我看到创建了拖动类，但没有发生移动。

Answer 1

考虑以下示例。

$(function() {
  function dragItems(dObj) {
    dObj.draggable({
      containment: "parent"
    });
  }

  var item = '<div class="item"></div>';
  $("#field").append(item);
  dragItems($("#field .item"));
});

#field {
  width: 400px;
  height: 200px;
  background: #CFC;
}

.item {
  width: 100px;
  height: 100px;
  background: #CCC;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="field"></div>

我怀疑您的示例还有更多代码。这包含在 $(function(){}); 中，它将等待 document 准备就绪。类似于 $(window).on('load')。

该函数设置为接受一个 jQuery 对象并将 Draggable 分配给该对象。因此，您必须将 $("#field .item") 对象传递给它。

现在，如果您先创建了对象，代码可能会少一些。您当前的代码不是在创建对象，而是通过追加注入(inject) HTML 字符串。请考虑以下事项。

$(function() {
  function dragItems() {
    $("#field .item").draggable({
      containment: "parent"
    });
  }

  var item = $("<div>", {
    class: "item"
  });
  $("#field").append(item);
  dragItems();
});

#field {
  width: 400px;
  height: 200px;
  background: #CFC;
}

.item {
  width: 100px;
  height: 100px;
  background: #CCC;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="field"></div>

我认为这更像是您想要做的，您只需将所有 .item 元素设为可拖动即可。您可以使用任何一种方法。我只是确保您以一种或另一种方式创建对象以与 Dragable 一起使用。

希望对您有所帮助。