0

この回答のように、複数のjquery uiソート可能なリストが接続されており、アイテムが1つのリストで受信されるたびに手動で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イベント ハンドラー内では、ui.senderおよびとして 2 つのリストを使用できます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/

これにより、キャンセル ボタンで 1 つの移動を元に戻すことができます。

于 2013-01-13T14:56:29.190 に答える