0

我有多个 jquery ui 可排序列表，它们连接起来，并在一个列表收到项目时手动平衡到 N 个项目 - 就像在这个答案中一样：https ://stackoverflow.com/a/13754827/27497

但是，当您在列表之间手动移动项目时（使用 jquery 的 .appendTo() 或 .prependTo()），jquery ui 可排序库不会检测到这些更改，因此当您使用“取消”命令时恢复状态，手动移动的项目不会放回其原始列表中。

是否有一种正确的方法可以手动将项目从一个列表移动到另一个列表，以便可排序库能够在您调用 $(".my-lists-selector").sortable("cancel"); 时将项目移回

这是一个示例，说明当您调用 .sortable("cancel") 时项目如何不恢复 - 只需在将项目从一个列表移动到另一个列表后单击红色取消按钮：http: //jsfiddle.net/SUffL/3/

   $(function() {
    $( ".connectedSortable" ).sortable({
        connectWith: ".connectedSortable",
        update: function(event, ui) {
            var ul1 = $("#ul1 li");
            var ul2 = $("#ul2 li");
            var ul3 = $("#ul3 li");

            checkul1(ul1, ul2, ul3);
            checkul2(ul1, ul2, ul3);
            checkul3(ul1, ul2, ul3);
        }
    }).disableSelection();

  $("#cancel-btn").click(function(){
    $(".connectedSortable").sortable("cancel");
  });
});

function checkul1(ul1, ul2, ul3) {
    if (ul1.length > 5) {
        ul1.last().prependTo(ul2.parent());
    }
}

function checkul2(ul1, ul2, ul3) {
    if (ul2.length > 5) {
        if (ul1.length < 5) {
            ul2.first().appendTo(ul1.parent());
        } else {
            ul2.last().prependTo(ul3.parent());
        }
    }
}

function checkul3(ul1, ul2, ul3) {
    if (ul3.length > 5) {
        ul3.first().appendTo(ul2.parent());
        checkul2(ul1, ul2, ul3);
    }
}
4

1 回答 1

1

这是一个解决方案，它存储手动移动的项目以及它开始的列表和移动到的列表。在receive事件处理程序中，2 个列表可用作ui.sender和this。我创建了一个简单的balanceLists函数来处理手动移动和取消

$(function () {

  var listChange = {
    startList: null,
    item: null,
    endList: null
  }
  $(".connectedSortable").sortable({
    connectWith: ".connectedSortable",
    receive: function (event, ui) {     
      listChange = {
        startList: ui.sender,
        item: ui.item,
        endList: $(this)
      }

      balanceLists($(this), ui.sender)

    }
  }).disableSelection();

  $("#cancel-btn").click(function () {
    if (listChange.item) {
      balanceLists(listChange.startList, listChange.endList)
      $(".connectedSortable").sortable("cancel").sortable("refresh");
      listChange.item=null;
    }
  });
});


function balanceLists($from, $to) {
  $to.append($from.find('li').last())

}

演示：http: //jsfiddle.net/SUffL/8/

这允许使用取消按钮撤消一个移动。

于 2013-01-13T14:56:29.190 回答