Question

我的可拖动元素是动态创建的。每次添加项目时，我都会再次调用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为ready。类似于$(window).on('load')。

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

现在，如果您首先创建了对象，则代码可能会少一些。您当前的代码不是创建对象，而是通过追加注入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一起使用。

希望有帮助。

为什么可拖动不适用于动态创建的元素？

1 个答案: