Removing one element from jquery sortable list on click

I have two sortable lists in jQuery. They're called sortable1 and sortable2. They are <li>s in <ul>s. When the user drags an element from sortable2 into sortable1, the element clones in sortable2. Once dropped in sortable1, the user shouldn't be able to move it back into sortable2 because there is already another one that took it's place.

我在jQuery中有两个可排序的列表。它们被称为sortable1和sortable2。他们在

s。当用户将一个元素从sortable2拖动到sortable1时,该元素将在sortable2中克隆。一旦放入sortable1,用户就无法将其移回sortable2,因为已经有另一个可以将它移到sortable2中。

My question is essentially two fold:

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

How do I prevent an item dropped in sortable1 from being dragged back into sortable2 while still having the ability to rearrange.

如何防止sortable1中丢弃的项目被拖回到sortable2,同时仍然能够重新排列。

How can I impliment the click function so that it will delete the sortable element you click on. This behavior should only occur in sortable1.

如何实现点击功能,以便删除您单击的可排序元素。此行为应仅在sortable1中发生。

Here is the script:

这是脚本:

<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>

And here is the snippet of html behind the lists:

以下是列表背后的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>

Thanks for any help! I am new to this amazing technology and I am continually amazed at what it can do.

谢谢你的帮助!我是这项神奇技术的新手,我不断惊讶于它能做些什么。

2 个解决方案

#1

You should probably split this into two questions. Regarding #2:

你应该把它分成两个问题。关于#2:

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

#2

I use the following code (@ChrisHerbert code does not work in my case):

我使用以下代码(@ChrisHerbert代码在我的情况下不起作用):

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

#1