Question

I have two connected sortables in jQuery. They’re called sortable1 and sortable2. When you take an element out of sortable2, you put it into sortable1. The user shouldn’t be able to move the element back into sortable2 after dragging has started (a clone is being made to fill the void.) So once dragging has commenced it, how can one keep it from going back into sortable2 while still having full functionality in sortable1?

Thanks for any help in advance!

Here is the script:

<script>
$(function() {
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable"                       
    }).disableSelection();
            $('.ui-state-highlight').click(function(){
                    if ($(this).parent().attr("id")!="sortable2") {
                     $(this).remove();
                    }
            });
            $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",
                    helper: function(e,li) {
                                    copyHelper=li.clone(true,true).insertAfter(li);
                                    return li.clone(true,true);
                                }
    }).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>

Answer 1

The connectWith paramter is a one way relationship as documented here:
http://api.jqueryui.com/sortable/#option-connectWith

So simply specifying #sortable2 connects with #sortable1 but leaving the parameter in #sortable1 blank would do the trick.

Something like:

$(function() {
    $( "#sortable2" ).sortable({
        connectWith: "#sortable1"
    })
    $( "#sortable1" ).sortable({
    })
});

http://jsfiddle.net/69vPK/2/