Почему Draggable не работает для динамически создаваемых элементов? - PullRequest
Новая
       10

Почему Draggable не работает для динамически создаваемых элементов?

1 голос
/ 23 марта 2019

Мои перетаскиваемые элементы создаются динамически. каждый раз, когда я добавляю элемент, я снова вызываю draggable (). Они получают перетаскиваемые классы, но не перетаскивают.

При записи с помощью перетаскивания в консоль отладки он успешно работает с нединамическими элементами. 

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

});

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

    $items.draggable();

}

В инспекторе я вижу, что классы перетаскивания созданы, но движение не происходит.

1 Ответ

1 голос
/ 23 марта 2019

Рассмотрим следующий пример. 

$(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.

Надеюсь, это поможет.

...