Search code examples
jquery-uidraggablejquery-ui-sortable

jQueryUI Sortable and connectWith - how to recognize list from which item comes?


I don't know how to recognize sortable from which item comes. It is two sortables and one draggable. Two sortables are connected to each other and draggable could be dragged into the lists. I need to recognize from which list item comes. http://jsfiddle.net/qAS93/

<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul class="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>
<ul class="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

$(".sortable").sortable({
    connectWith: ".sortable",
    revert: true,
    receive: function(){
        $('#text').text('I don't know from which list item comes');
    }
});

$("#draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "invalid"
});

Solution

  • You can know from where the item has been dragged(or sent). It is in the item.sender property

    For sortable, its the parent of the element, and for draggable, its the element itself

    receive: function(ui, item){
        console.log('item parent',item.sender);
        if($(item.sender).hasClass('draggable')){
            var parent = $(item.sender).parent();
        }
        else{
            var parent = item.sender;
        }
    
        console.log('parent', parent);
    }
    

    Here is the updated fiddle