I have two separate lists: list-A and list-B
both of them are sorted thanks to the jQuery UI plugin.
The users of the project I'm working on want to confirm the action when items are moved from one list to another, but not when moving inside the same list. When the action is triggered, the page will launch an Ajax request to the server to update the list items.
I am worried about the order of events. So far, my experience is that the update event is fired before the receive event, so the request is already initiated before the confirmation dialog box is displayed.
Unfortunately, I forgot which of the lists triggers the request, but in my case it really does not matter: if an item is dragged into another list, nothing should be sent to the server until the user confirms the action.
I used jQuery quite a bit, but I think I can use some help on this.
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) the user drags A1 to A3 - the result is not a confirmation dialog, so the request is sent to the server to save the new sort order.
Scenario II) the user drags A1 to B3 (or B3 to A1) - the result is a confirmation dialog box, and then only if the dialog is accepted, a request is sent to the server. Here I set two queries as described in one of my comments.