0

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

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

例如：当用户将第 1 个元素移到第 5 个时，排序发生在我手动进行交换之前，所以用户觉得当鼠标在排序时没有释放时，结果是不同的（第 2 个将占据第 1 个的位置，第 3 个将进入第 2 个等。 ）在实际交换中，就像我在排序停止事件上交换一样。

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

问候，

西努瓦桑

我的代码如下：

脚本

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

0 回答 0