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

Question

我在 jQuery 中有两个可排序的列表。它们被称为 sortable1 和 sortable2。它们是 <ul> 中的 <li>。当用户将一个元素从 sortable2 拖到 sortable1 中时，该元素将克隆到 sortable2 中。一旦放入 sortable1，用户就不能将其移回 sortable2，因为已经有另一个取代了它。

我的问题本质上是两个方面：

1. 如何防止在 sortable1 中放置的项目被拖回 sortable2 中，同时仍具有重新排列的能力。
2. 我怎样才能实现点击功能，以便它会删除您点击的可排序元素。这种行为应该只发生在 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();
});