创建动态 div 以拖放元素时无法放置元素

Question

跟进我之前的。它工作得很好。但是当我动态创建 li 元素所在的 divs 时，我无法将元素放入其中。

我正在使用基本的 HTML 拖放功能。为什么 on drop 与动态创建的 div 一起工作？

这是我的代码：

    ['harry', 'hermione', 'ron', 'ginny', 'luna'].forEach(met => {
        $(`#char`).append(`
            <div class="form-check py-1">
            <label class="form-check-label">
            <input type="checkbox" class="form-check-input pickTarget" name='checkTarget' value="${met}">${met}
            </label>
            </div>
            `);
    });

    $('.pickTarget').click(function() {
        let unselected = $('.pickTarget:checked').length >= 3;
        $('.pickTarget').not(":checked").attr("disabled", unselected);
    });

    $('.pickTarget').change(function() {
        if ($(this).is(':checked')) $(this).parent().append(`<div style='border: 1px solid red' class='float-right ml-3 text-muted target' id='drop_${this.value}'>Drag Number</div>`);
        else $(`#drop_${this.value}`).remove();
    });

    $('#list').on('dragstart', 'li', function(e) { e.originalEvent.dataTransfer.setData('text', e.target.id); });

    var $target = $('.target');
    var $list = $('#list');

    $target.on('drop', function(e) {
        e.preventDefault();
        let data = e.originalEvent.dataTransfer.getData('text');
        $list.append($(this).html());
        $(this).html($(`#${data}`));
    });

    $target.on('dragover', function(e) { e.preventDefault(); });

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<br />
<div id='char' class='w-50 float-left h-50 overflow-auto ml-5'><b>Characters</b> (select 3)</div>

<br />
<ul id="list" class='list-group d-inline-block ml-2'>
    <li id="drag1" class='list-group-item py-1' draggable='true' data-order="1">one</li>
    <li id="drag2" class='list-group-item py-1' draggable='true' data-order="2">two</li>
    <li id="drag3" class='list-group-item py-1' draggable='true' data-order="3">three</li>
</ul>

在我的代码中，单击哈利波特角色旁边的复选框后，它会创建一个 div。选择 3 个 div 后（仅允许 3 个），将在复选框旁边创建 div。我想将每个 one, two & three 拖到每个 div。为什么它不起作用？

这是我的代码的fiddle。

Answer 1

您的目标 div 是动态创建的，因此您需要将其与 dom 中已经存在的静态元素绑定。所以，只需使用 $("#char").on('drop', '.target',.. 和相同的 dragover 事件。

此外，在您的代码中，当用户取消选中复选框时，如果 target div 中有任何 li 项，它们也会被删除。相反，您检查目标 div 是否有名称为 list-group-item 的任何 class 如果是，则只需克隆该元素然后将其附加到您的 list 最后删除整个 div.

演示代码 :

['harry', 'hermione', 'ron', 'ginny', 'luna'].forEach(met => {
  $(`#char`).append(`
            <div class="form-check py-1">
            <label class="form-check-label">
            <input type="checkbox" class="form-check-input pickTarget" name='checkTarget' value="${met}">${met}
            </label>
            </div>
            `);
});

$('.pickTarget').click(function() {
  let unselected = $('.pickTarget:checked').length >= 3;
  $('.pickTarget').not(":checked").attr("disabled", unselected);
});

$('.pickTarget').change(function() {
  if ($(this).is(':checked')) {
    $(this).parent().append(`<div style='border: 1px solid red' class='float-right ml-3 text-muted target' id='drop_${this.value}'><span class='${this.value}'>Drag Number</span></div>`);
  } else {
    //check if the div has li item inside it 
    if ($(`#drop_${this.value}`).find(".list-group-item").length > 0) {
      var cloned = $(`#drop_${this.value}`).find(".list-group-item").clone() //yes clone it
      $("#list ." + this.value).remove(); //remove Drag Number span
      $("#list").append($(cloned)) //append li again in list
    }
    $(`#drop_${this.value}`).remove(); //finally remove div
    //you can write code for sorting lis ..here 
  }
});

$('#list').on('dragstart', 'li', function(e) {
  e.originalEvent.dataTransfer.setData('text', e.target.id);
});
var $list = $('#list');
//change this
$("#char").on('drop', '.target', function(e) {
  e.preventDefault();
  let data = e.originalEvent.dataTransfer.getData('text');
  $list.append($(this).html());
  $(this).html($(`#${data}`));
});
//change this
$("#char").on('dragover', '.target', function(e) {
  e.preventDefault();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<br />
<div id='char' class='w-50 float-left h-50 overflow-auto ml-5'><b>Characters</b> (select 3)</div>
<br />
<ul id="list" class='list-group d-inline-block ml-2'>
  <li id="drag1" class='list-group-item py-1' draggable='true' data-order="1">one</li>
  <li id="drag2" class='list-group-item py-1' draggable='true' data-order="2">two</li>
  <li id="drag3" class='list-group-item py-1' draggable='true' data-order="3">three</li>
</ul>

创建动态 div 以拖放元素时无法放置元素

Not able to drop element when creating dynamic divs to drag and drop element in

html

javascript

jquery

drag-and-drop

ecmascript-6