带交换的Jquery排序

我在我的网页中有9个（3行3列）div元素，在这里我实现了jquerysortable方法，当用户将任何元素转移到另一个元素时，我需要交换而不是排序。例如，如果我把第一个元素移到第五个，第一个元素应该移到第五个位置，第五个元素应该移到第一个位置，基本上这是交换

我通过查找在sortstop事件中移动的元素的当前索引和旧索引，并根据索引插入元素，实现了这一点。但我有以下问题

例如：当用户将第一个元素移到第五个元素时，排序发生在我手动进行交换之前，所以用户感觉当鼠标未在排序时释放时，实际交换的结果不同（第二个元素将占据第一个元素的位置，第三个元素将移到第二个元素，等等），就像我在排序停止事件时交换一样

请让我知道是否有任何解决办法

问候,

塞努瓦桑先生

我的代码如下：

剧本

$（“#可排序”）.sortable({
句柄：'.portlet头'
});
$（“#可排序”）。在（“排序顶部”，函数（事件，用户界面）{
var currentPortid=ui.item.attr（“id”）；
var currentIndex=ui.item.index（）；
var oldIndex=-1；
var oldPortid=“”；
//要获取旧索引，此数组将在页面加载和基于交换更新时保存所有索引
对于（i=0；i

HTML:

你真的有代码要发布吗？在中制作模型会更好。嗨，jai，我已经添加了代码

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

});

<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>