Question

我正在尝试将以下内容与jQuery和Sortable放在一起：我需要抓住两种情况：

A：移动同一列表中的项目
B：将项目从一个列表移动到另一个列表

仅使用receive事件时，案例 B 即可解决。但是如果我同时绑定receive和stop，那么当将项目从一个列表移动到另一个列表时，它们也会被解雇。这使得我无法捕获案例 A ，因为我无法确定该项目是从其他列表移动还是在同一列表中移动。希望这是有道理的。

这有点奇怪，因为我认为我的用例是最常用的用例。

我渴望创意。如果您想尝试一下，请参阅http://jsfiddle.net/39ZvN/5/。

HTML：

<div id="list-A"> <ul class="sortable"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> <br /> <div id="list-B"> <ul class="sortable"> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> </div>

JS：

$(function() { $('.sortable').sortable({ stop: function(event, ui) { // Wird auch aufgerufen wenn von Liste X nach Liste Y gezogen wird if(!ui.sender) alert("sender null"); else alert("sender not null"); }, receive: function(event, ui) { // Funktioniert top, damit kann ich Fall B abfangen alert("Moved from another list"); }, connectWith: ".sortable" }).disableSelection(); });

Answer 1

~~这很有意思。我原以为取消会将项目移回原来的列表，但是接收事件很晚才会被触发并阻止其他事件被触发。希望这会有所帮助。~~这个解决方案没有用，但我愚蠢到不能看到它。我删除了之前的代码，因为它完全是胡说八道。

这是一个使用多个事件跟踪状态的有效解决方案：

$(function() {
    var oldList, newList, item;
    $('.sortable').sortable({
        start: function(event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent().parent();
        },
        stop: function(event, ui) {          
            alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
        },
        change: function(event, ui) {  
            if(ui.sender) newList = ui.placeholder.parent().parent();
        },
        connectWith: ".sortable"
    }).disableSelection();
});

http://jsfiddle.net/39ZvN/9/

Answer 2

我认为这就是你想要的 http://jsfiddle.net/39ZvN/6/

你基本上必须分开可排序的命令并给每个UL一个id。

Answer 3

我也在寻找相同的...但以上所有解决方案都不能按我的意愿运作。从jquery-ui连接的可排序列表获取两个列表的序列化/ toarray值，如果项目从一个移动到另一个。

最后我用更新的单一方法弄明白了。

function getSortableOrder(sortableList,ui){
  var listItems = {}
listItems['sortable'] = sortableList.sortable('toArray');
  if(ui.sender!=null)
    listItems['sender'] = ui.sender.sortable('toArray');
  console.log(listItems);
}
$('.sortable[sortable="true"]').sortable({
                    connectWith:".sortable",
                    placeholder: "ui-state-highlight",
                    update: function(ev, ui) {
                      getSortableOrder($(this),ui);
                    }
                });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="list-A">
    <ul id='sort1' sortable="true" class="sortable">
        <li id="1.1">item 1</li>
        <li id="1.2">item 2</li>
        <li id="1.3">item 3</li>
    </ul>
</div>
<br />
<div id="list-B">
    <ul id='sort2' sortable="true" class="sortable">
        <li id="2.1">item 4</li>
        <li id="2.2">item 5</li>
        <li id="2.3">item 6</li>
    </ul>
</div>

jQuery UI可排序和两个连接列表

3 个答案: