在创建动态div以在中拖放元素时，无法删除元素

Question

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

我使用的是基本的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。为什么它不起作用？

这是我密码的小提琴。

Answer 1

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

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