Question

我在jQuery中有两个可排序的列表。它们被称为sortable1和sortable2。它们是＆lt; l＆gt; s。当用户将一个元素从sortable2拖动到sortable1时，该元素将在sortable2中克隆。一旦在sortable1中删除，用户就不应该将其移回sortable2，因为已经有另一个可以将它移到sortable2。

我的问题基本上是双重的：

如何防止sortable1中的项目被拖回到sortable2中，同时仍然可以重新排列。
如何实现点击功能，以便删除您点击的可排序元素。此行为应仅在sortable1中发生。

这是脚本：

<script>
$(function() {
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
            $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",
                    helper: function(e,li) {
                                    copyHelper= li.clone().insertAfter(li);
                                    return li.clone();
                                }
    }).disableSelection();
});    
</script>

以下是列表背后的html片段：

<div id="symbolbay">
     <p>Drop symbols here</p>
     <ul id="sortable1" class="connectedSortable"></ul>
</div>
<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Click me to delete only me</li>
    <li class="ui-state-highlight">Click me to delete only me</li>
...There are a whole bunch more, finally ending in...
</ul>

感谢您的帮助！我是这项神奇技术的新手，我不断惊讶于它能做些什么。

Answer 1

你应该把它分成两个问题。关于＃2：

$('#sortable1 .ui-state-highlight').click(function(){
  $(this).remove();
});

Answer 2

我使用以下代码（@ChrisHerbert代码在我的情况下不起作用）：

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

单击时从jquery可排序列表中删除一个元素

2 个答案: