Question

我有两个连接的可排序列表。当我将一个元素从左侧列表拖到右侧列表时，我的代码工作正常，但是如果我想知道左侧列表中的项目顺序，您能告诉我应该查找哪个事件吗？当一个项目被拖放到同一个列表中时（基本上对同一列表中的项目进行重新排序，而不是拖放到另一个列表但是相同）。

谢谢。

修改

以下是代码的链接：http://jsfiddle.net/Hitman666/WEa3g/1/

因此，正如您将看到我在oposite列表中拖放项目时发出警报，但是当列表（例如绿色列表）被重新排序时我也需要一个事件。然后我需要提醒订单，例如：4,3,2,1

HTML：

<ul id="sortable1" class="connectedSortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li>Item 5</li>    
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>    
</ul>

CSS：

#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

#sortable1 li{background: green;}
#sortable2 li{background: yellow;}

使用Javascript：

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        receive: myFunc
    }).disableSelection();

    function myFunc(event, ui) {
        alert(ui.item.html());
    }
});

Answer 1

您需要使用更新事件。这是我的例子（注意我做了2个额外的函数调用来排序，因为你只需要在左侧列表中使用evt）：

$(function(){
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable",
        update: myFunc
    });

    $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",  // deactivate:myFunc
    });

    function myFunc(event, ui){
        var b = $("#sortable1 li"); // array of sorted elems
        for (var i = 0, a = ""; i < b.length; i++)
        {
            var j=i+1; // an increasing num.
            a = a + j + ") " + $(b[i]).html() + '\n ' //putting together the items in order
        }
        alert(a)                 
    }
});

希望这有帮助。

Answer 2

使用此拖放js来执行此操作和

http://www.redips.net/javascript/drag-and-drop-table-content/

它有很多事件你可以使用ajax编写你的js代码或调用服务器端代码..

即

REDIPS.drag.myhandler_clicked = function () { }
REDIPS.drag.myhandler_moved = function () { document.getElementById('message').innerHTML = 'Element is moved' }
REDIPS.drag.myhandler_notmoved = function () { document.getElementById('message').innerHTML = 'Element is not moved' }
REDIPS.drag.myhandler_dropped = function () { document.getElementById('message').innerHTML = 'Element is dropped' }

如何检测项目已被删除在同一可排序列表中

2 个答案: