Enabling sorting in jQuery UI Sortable with connected lists

1
votes

I have a two <ul> lists connected up with jQuery UI Sortable.

I need items to be dragged and dropped from one list to the other and have used connectWith: "ul" as demonstrated below:

$("ul.droptrue").sortable({
   connectWith: "ul",
   receive: function (event, ui) {
   ...

This fires absolutely fine and works as expected.

How can I listen for reorder events within the individual lists themselves?

I tried using sort: function (event, ui), however this seems to listen for all movement.

If anybody could suggest the best way to achive this, I'd appreciate it.

Here are my lists

<ul id="otpages1" class='droptrue'>
<li id="item-1" class="ui-state-default">Item 1</li>
<li id="item-1" class="ui-state-default">Item 2</li>
</ul>
<ul id="otpages2" class='droptrue'>
<li id="item-2" class="ui-state-highlight">Item 1</li>
<li id="item-2" class="ui-state-highlight">Item 2</li>
</ul>
2
jqueryjquery-uijquery-ui-sortable
How about the update event? That fires when the DOM position has changed between lists, as well as within a single list. – j08691
Thanks for the tip. This seems to fire twice is I drag and drop between ULs. – Nick

2 Answers

3
votes

I ended up solving it like this:

$(function () {
    var oldList, newList, item;
    $('ul.droptrue').sortable({
        start: function (event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent();
        },
        stop: function (event, ui) {

        // perform action here

        },
        change: function (event, ui) {
            if (ui.sender) newList = ui.placeholder.parent();
        },
        connectWith: ".droptrue"
    }).disableSelection();
0
votes

You can leverage the update event of the sortable, which, as described in the JQuery UI API documentation, contains a null value for the sender attribute when the sorting occurs in the same list.

$("#sortable").sortable({
    update : function(e, ui) {
        if (ui.sender == null && ui.item.parent().is($(this))) {
            // Items were sorted within the same list
            // Do something here...
        }
    }
});