Confirm jQuery sortable receive event

Question

I have two separate ul lists: list-A and list-B

both of them are sortable thanks to the jQuery UI plugin.

Users of the project I'm working on wants to confirm the action when items are moved from one list to the other, but not when moving within the same list. When an action is triggered, the page will launch an Ajax request to the server to update the positions of the list(s).

What's troubling me is the order of the events. My experience so far is that the update event is triggered before the receive event so before the confirm dialog is shown, a request has already been initiated.

Unfortunately I forget which of the lists that trigger the request but in my case it really does not matter: if an item is dragged onto another list, nothing should be sent to the server until the user has confirmed the action.

I've used jQuery quite a bit but I think I could use some help on this one.

Javascript:

$('.sortable').sortable({
    start: function (event, ui) {
        $(ui.helper).addClass("sortable-drag-clone");
    },
    stop: function (event, ui) {
        $(ui.helper).removeClass("sortable-drag-clone");
    },
    update: function (event, ui) {

        if ($(ui.sender).length == 0) {
            alert("item was moved within the same list.");
            //Make request
        } else {
            //do nothing.
        }
    },
    receive: function (event, ui) {
        if (confirm("show move or copy dialog, from {0} to {1}")) {
            //do request
        } else {
            $(ui.sender).sortable("cancel");
            //no request
        }
    },
    tolerance: "pointer",
    connectWith: ".sortable",
    placeholder: "sortable-draggable-placeholder",
    forcePlaceholderSize: true,
    appendTo: 'body',
    helper: 'clone',
    zIndex: 666
}).disableSelection();

Markup:

<div id="list-A">
    <ul class="sortable">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>
<div id="list-B">
    <ul class="sortable">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

Update:

Scenario I) user drags A1 to A3 - result is no confirm dialog so a request is sent to the server so that the new sort order is persisted.

Scenario II) user drags A1 to B3 (or B3 to A1) - result is a confirm dialog and then, only if the dialog is accepted, a request is sent to the server. This is where I've settled with two requests as I described in one of my comments.

Answer 1

You don't need the update method then, just remove it! Example link.