使用swap进行Jquery排序

Question

我的网页中有9个（3行和3列）div元素，其中我实现了jquery可排序方法，当用户将任何元素带到另一个时，我将需要交换而不是排序。例如，如果我把第1个元素带到第5个，第1个应该是第5个位置，第5个应该是第1个位置，基本上它是交换。

我通过查找在sortstop事件中移动的元素的当前和旧索引并基于索引插入元素来实现此目的。但我有以下问题。

对于ex：当用户将第一个元素设置为第5个时，在我手动进行交换之前进行排序，因此用户认为当排序时未释放鼠标时，结果会有所不同（第2个将占据第1个和第3个将转为第2个等。）在实际交换中，因为我交换了排序停止事件。

如果有任何解决方法，请与我们联系。

此致

M.Seenuvasan

我的代码如下：

脚本

    $("#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>