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

问题描述

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

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

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

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

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

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.

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

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屋！