how to indicate a change in list elements' order using jquery?

2
votes

i am using jquery sortable.

right now i have a list of items that i can ALREADY use drag and drop. which is cool.

i will use a submit button at the bottom of the list to submit the new order. the change in the list is not automatically submitted.

All i need is somehow indicate that an element's position has changed. I googled quite a bit. no answer.

original list:

item1 item2 item3 item4 item5

submitbutton here.

changed list: i moved item 2 below item3 for eg.

item1 item3 item2 * item4 item5

submitbutton here.

how do i use the sortable in jquery for me to display a sign on the item 2?

i think should be the change event of sortable but i still do not know how to use it since i am a newbie in jquery.

http://docs.jquery.com/UI/Sortable#event-change

thank you.

2
jqueryjquery-uijquery-ui-sortableonchange
Are you looking to display a specific visual effect on item 2 or are you asking how to update the list? – Maxim Zaslavsky

2 Answers

1
votes

I think what you want to do is have an ordered list of items (1. Item 1, 2. Item 2, 3. Item 3) and then when one item is moved you want to renumber the list, right? So if 2 is moved below three, you would want the text to say something like 1. Item 1, 2. Item 3, 3. Item 2. If I'm correct with that, your code would look something like this. First, here's what your HTML would need to look like.

<ul id="yourSortableListID">
   <li class="renumberMe"><span class="list_num"></span> Item 1</li>
   <li class="renumberMe"><span class="list_num"></span> Item 2</li>
   <li class="renumberMe"><span class="list_num"></span> Item 3</li>
</ul>

Your JavaScript would look something like this:

function renumberListItems() {
    i = 1;
    $(".renumberMe").each( function() {
        $(".list_num", this).text(i + ".");
        i++;
    });
}

// we don't want to add the sortable until the dom is ready
$(document).ready(function() {
    renumberListItems();
    $("#yourSortableListID").sortable({
        stop: function(event, ui) {renumberListItems();}
    });
});

renumberListItems() goes through each of the li items, then finds the list_num items within it, and just updates the text using i's value so that the list is renumbered. We do this using the stop event provided with sortables (more info under the Events tab on this page), which calls whatever function you give it whenever the user has moved an item and releases the mouse.

1
votes

You could provide a callback for the update event for sortable, and within that callback, access ui.item to get to the dragged element. For example:

$(function() {
  $("#sortableList").sortable({
    update: function(event, ui) {
      // Update ui.item to your requirement
    }
  });
});