jQueryUI Sortable和connectWith - 如何识别来自哪个项目的列表?

时间:2013-08-08 14:53:56

标签: jquery-ui draggable jquery-ui-sortable

我不知道如何识别来自哪个项目的可排序。这是两个可分类和一个可拖动的。两个可排序的数据相互连接,可拖动可拖动到列表中。我需要识别哪个列表项来了。 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 dont know from wich list item comes');
    }
});

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

感谢。

1 个答案:

答案 0 :(得分:1)

您可以知道项目被拖动(或发送)的位置。它位于item.sender属性

对于sortable,它是元素的父元素,对于draggable,它是元素本身

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