Question

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.

My question is essentially two fold:

1. How do I prevent an item dropped in sortable1 from being dragged back into sortable2 while still having the ability to rearrange.
2. 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.

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:

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

Answer 1

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

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