Question

I have several dynamically generated unordered lists. The <li>‘s within them are draggable/droppable elements which are apended into a div when dropped there.

I want to be able to return these <li>‘s into their original lists and at the same index so that they are in exactly the same position as before.

I have been able to achieve this by doing the following:-

When dragging the element using the .data function as below:

$item.data('originalParent', $(this).prev());

Then when I return the element using this:-

.insertAfter( $item.data('originalParent') )

This of course works great, however a problem arises when I have also dragged the previous <li> into the droppable box since the item is appended next to that, instead of in the original parent at the correct index.

How else can I dynamically store the index location so that I can return it to the correct parent <ul> at the correct <li> index? Even if the number of <li> elements has changed in the <ul>.

I hope this is clear enough as I am finding it difficult to articulate.

Thanks

Answer 1

gordyr to expand on my comments since its easier to type and show examples here if you have a setup like

<ul list="1">
    <li list="1" item="1"></li>
    <li list="1" item="2"></li>
</ul>
<ul list="2">
    <li list="2" item="1"></li>
    <li list="2" item="2"></li>
</ul> 

When a list item is dropped you can grab and store its list and item attributes using

list =  $(this).attr('list');
item =  $(this).attr('item');
// store this list and item variable data with the div or parent of where ever the list item was dropped

when you want to reset the dragged list item back to its original spot in the UL it came from, read the list and item variable you stored with it, we’ll say you grabbed them and they are stored in list and item and the li to restore is element

To restore the list item to its original position you can do something like:

if (item == 1)
{
    // the list item being restored is the first so prepend it to the beginning of the list it came from
    element.prependTo( $('ul[list=' + list + ']') );
}
else
{
    // the list item is not the first so find the item before it in the list it came from and insert it after that list item
    element.insertAfter( $('ul[list=' + list + '] li[item=' + (item - 1) + ']') );
}

Hope this helps any, I could be just way off on what your trying to do. The examples above still would need to be expanded upon, like the last one, since it’s just going back one item in the list, that item could of been moved also so it wont be in the list so you’d have to keep iterating back till you found the next item in the list and insert it after that one.

If the item is 4, look for item 3 in the list, if not there then 2, if not there then 1, if 1 isn’t there then prepend to the beginning of the list.