Question

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

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

是否有正确的方法将项目从一个列表移动到另一个列表，以便可调整的库能够在您调用$（“。my-lists-selector”）时将项目移回.sortable（“cancel” ）;

以下是调用.sortable（“取消”）时项目如何不恢复的示例 - 只需在将项目从一个列表移动到另一个列表后单击红色取消按钮：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);
    }
}

Answer 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())

}

DEMO：http://jsfiddle.net/SUffL/8/

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

将手动更改还原为2个连接的jquery ui可排序的lsts

1 个答案: