Question

我有一个问题jQuery Ui drag＆amp;丢弃功能。

我需要删除下拉列表中的选定<li>

我的代码：

$( "#sortable-left, #sortable-right" ).sortable({
  connectWith: ".connectedSortable"
}).disableSelection();

$("#sortable-right").on("click", "li a", function () {
$(".mdm-right-sortable li").remove();
});

您可以在此处查看完整代码：JSFiddle

有谁知道解决方案？

Answer 1

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" alt="your image or text is here: drag it in to the box :">

</body>
</html>

Answer 2

您可以使用<li>关键字删除点击的this。

更改

$("#sortable-right").on("click", "li", function () {
     $(".mdm-right-sortable li").remove();
 });

到

$("#sortable-right").on("click", "li", function () {
     $(this).remove();
 });

UpdatedFiddle

更新： （根据评论）

您可以点击使用<li>的图标删除closest()，如下所示：

$("#sortable-right").on("click", "li a", function () {
     $(this).closest('li').remove();
 });

jquery拖放 - 在两个列表之间拖动，如何删除选中的列表

2 个答案: