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

前端之家收集整理的这篇文章主要介绍了jQuery UI可排序和两个连接的列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用jQuery和Sortable来组合以下内容
有两种情况我需要抓住:

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

案例B仅在使用接收事件时解决.但是,如果我绑定收到和停止,他们也会从一个列表移动到另一个列表时被解雇.
这使得我不可能捕获案例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();
});

解决方法

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

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

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

原文链接:https://www.f2er.com/jquery/179752.html

猜你在找的jQuery相关文章