How to determine if an item has been deleted in the same sortable list

Question

I have two related sortable lists. My code works fine when I drag one item from the list on the left to the one on the right, but can you tell me what event I should look for if I want to know the order of the items in the left list when the item is dragged and deleted in the same list (basically, reorder items in the same list without dragging them to another list, but in the same list).

Thanks.

Edit:

Here is the link to the code: http://jsfiddle.net/Hitman666/WEa3g/1/

So, as you will see, I have a warning when items are dragged and dropped in oposite lists, but I also need an event when the list (like green) gets reordered. Then I will need to warn the order, for example: 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

You need to use the update event. Here is my example (note that I made 2 additional function calls for sorting since you only need evt in the left list):

 $(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) } }); 

Hope this helps.

Answer 2

use this js drag and drop for this and

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

and there are many events in it where you can write your js code or server side code using ajax ..

i.e.

 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' }