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

Question

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

• 答:移动同一列表中的项目
• B:将项目从一个列表移动到另一个列表

仅使用事件时解决案例B. receive但是如果我绑定两者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/