jQueryUI Sortable 和 connectWith - 如何识别列表来自哪个项目？答案

【问题标题】：jQueryUI Sortable and connectWith - how to recognize list from which item comes?jQueryUI Sortable 和 connectWith - 如何识别列表来自哪个项目？
【发布时间】：2013-08-08 14:53:55
【问题描述】：

我不知道如何识别 sortable 来自哪个项目。它是两个可排序的和一个可拖动的。两个 sortable 相互连接，并且可以将 draggable 拖到列表中。我需要识别来自哪个列表项。 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"
});

【问题讨论】：

标签： jquery-ui draggable jquery-ui-sortable

【解决方案1】：

您可以知道该项目是从哪里被拖动（或发送）的。它在 item.sender 属性中

对于可排序，它是元素的父元素，对于可拖动，它是元素本身

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);
}

这里是updated fiddle

【讨论】：