jQuery UI Sortable + Dragable - Prevent items from

问题:

I am using a combination of sortable and dragable on a "widget-style" set of lists. I have my "available" list of items in a draggable list that is connected to 7 "target" lists (which are sortable). The available list has the clone helper to make sure the available list always stays populated with the available items. This all works beautifully, with one exception.

Once an item has been dragged and dropped from the available column to a target column, I do not want it to be draggable onto THAT column again (it CAN however, be dragged onto other columns, assuming its not already in that column.

Here is a JS Fiddle that should demonstrate the functionality: http://jsfiddle.net/Y4T32/8/

Here is the code that I am using:

JS:

    $( ".sph-callout-portlet" ).sortable({
        placeholder: "ui-state-highlight"
    });
    $( "#sph-callout-portlet-avail li" ).draggable({
        connectToSortable: ".sph-callout-portlet",
        helper: "clone",
        stop: function(event, ui) {
            //Other functionality here, removed for brevity
        }
    });

HTML:

<ul class="sph-callout-portlet-avail">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
<ul class="sph-callout-portlet-avail">

</ul>
<ul class="sph-callout-portlet-avail">

</ul>
<!-- Total of 7 empty lists -->