jquery - スワップによるJqueryソート

Question

Web ページに 9 個 (3 行と 3 列) の div 要素があり、jquery の並べ替え可能なメソッドを実装しています。ユーザーが要素を別の要素に移動すると、並べ替える代わりに交換する必要があります。たとえば、1 番目の要素を 5 番目に移動する場合、1 番目の要素は 5 番目の位置に移動し、5 番目の要素は 1 番目の位置に移動する必要があります。基本的には交換です。

sortstop イベントで移動する要素の現在および古いインデックスを見つけ、インデックスに基づいて要素を挿入することで、これを達成しました。しかし、私は以下の問題があります。

例: ユーザーが 1 番目の要素から 5 番目の要素を取得すると、手動でスワップを行う前に並べ替えが行われるため、ユーザーは並べ替えでマウスを放さないと結果が異なると感じます (2 番目が 1 番目の位置になり、3 番目が 2 番目になるなど.. ）ソート停止イベントでスワップするので、実際のスワップで。

これに対する回避策があれば教えてください。

よろしく、

M.シーヌバサン

以下の私のコード：

脚本

    $("#sortable").sortable({

        handle: '.portlet-header'
    });


$("#sortable").on("sortstop", function (event, ui) {

var currentPortid = ui.item.attr("id");
    var currentIndex = ui.item.index();

var oldIndex = -1;
    var oldPortid = "";

//to get old index, this array will hold all the index while page load and update based on swap
    for (i = 0; i < PortletIndex.length; i++) {
        if (PortletIndex[i][0] == currentPortid) {
            oldIndex = PortletIndex[i][1];
        }
        if (PortletIndex[i][1] == currentIndex) {
            oldPortid = PortletIndex[i][0];
        }
    }

$($("#sortable div.portlet")[oldIndex]).after($("#" + oldPortid));

});

HTML:

<div id="sortable">
            <div id="myportlet1" class="portlet sortable row1" >
                <div class="portlet-header">

                </div>

            </div>
            <div id="myportlet2" class="portlet sortable row1" >
                <div class="portlet-header">

                </div>

            </div>
            <div id="myportlet3" class="portlet sortable row1" >
                <div class="portlet-header">

                </div>

            </div>
            <div id="myportlet4" class="portlet sortable row2" >
                <div class="portlet-header">

                </div>

            </div>
            <div id="myportlet5" class="portlet sortable row2" >
                <div class="portlet-header">

                </div>

            </div>
            <div id="myportlet6" class="portlet sortable row2" >
                <div class="portlet-header">

                </div>

            </div>
            <div id="myportlet7" class="portlet sortable row3" >
                <div class="portlet-header" >

                </div>

            </div>
            <div id="myportlet8" class="portlet sortable row3" >
                <div class="portlet-header">

                </div>

            </div>
            <div id="myportlet9" class="portlet sortable row3" >
                <div class="portlet-header">

                </div>

            </div>
        </div>