jQuery UI可排序和两个连接的列表 [英] jQuery UI Sortable and two connected lists

问题描述

我正在尝试用jQuery和Sortable来组合以下内容：
有两种情况需要抓取：

• A：移动同一列表中的项目


• B：将项目从一个列表移动到另一个列表

仅使用接收事件时，案例 B 已解决。但是如果我同时绑定收到和 stop ，那么当将项目从一个列表移动到另一个列表时，它们也会被解除。
这使得我无法捕获案例 A ，因为我无法找出该项目是否从另一个列表或同一个列表中移除。希望这是有道理的。

这很奇怪，因为我会将我的用例视为最常用的。

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

HTML：

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

JS：

 code> $（function（）{
 $（'。sortable'）。sortable（{
 stop：function（event，ui））{
 // Wird auch aufgerufen wenn von列表X nach Liste Y gezogen wird 
 if（！ui.sender）alert（sender null）; 
 else alert（sender not null）; 
}，
接收：function（event，ui）{
 // Funktioniert top，damit kann ich Fall B abfangen 
 alert（从另一个列表移动）; 
}，
 connectWith： .sortable
}）。disableSelection（）; 
}）; 
  

解决方案

这有趣地完成了这项工作。我会认为取消将项目移动到其原始列表，但接收事件触发非常晚，并停止其他事件触发。希望这有帮助。这个解决方案没有起作用，但我很笨，看不到它。我删除了以前的代码，因为它是完整的废话。

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

  $（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/ ​​

I am trying to put together the following with jQuery and Sortable: There are two cases that I need to grab:

• A: move an item within the same list
• B: move an item from one list to another

Case B is solved when only using the receive event. But if I bind both receive and stop they also get fired both when moving an item from one list to another. This makes it impossible for me to capture case A because I have no way of finding out if the item was moved from another list or within the same. Hope that makes sense.

This is kind of weird because I would think of my use case as being the most used one.

I am craving for ideas. If you want to try it out, see 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();
});

解决方案

This interestingly does the job. I would have thought that cancel would move the item back to its original list, but the receive event is fired very late and stops the other events from firing. Hope this helps. This solution did not work but I was stupid enough to not see it. I removed the previous code as it is complete nonsense.

This is a working solution which tracks state using several events:

$(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/

这篇关于jQuery UI可排序和两个连接的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！