Question

Having two lists[A,B,C,D] and [1,2,3,4], I want to provide a user interface for merging them into a new list. In the new list the original order of each list should be maintained. For example any of [A,1,B,2,C,3,D,4]or [A,B,C,D,1,2,3,4]or [A,B,1,C,2,3,4,D]are OK. But [B,A,1,2,3,4,C,D] is not accepted, due to B coming before A.

jQuery UI sortable seems to be a good starting point. But maintaining the original order is not supported (Of course the meaning of sortable is in contrast with my requirement. But the user interface supported with sortable, is very similar to my final goal.)

I think handling receive event and canceling the sort when the order is not maintained, could be the solution. But could not found how to cancel or undo the drag, when receive is complete.

Thanks in advance

Answer 1

you are right. jquery’s sortable will do the trick.

start with using a helper

$( ".selector" ).sortable({ helper: 'clone' });

this won’t drag the item itself but a cloned replica.

next you can use the event “beforeStop” to check the previous and next item.

$( ".selector" ).sortable({ 
     helper: 'clone',
     beforeStop: function(event, ui) { ... }
 });

remember that the appendTo and prependTo and insertAfter and insertBefore function are moving a dom element rather than cloning it. This means this code is valid for playing with the li elements.

html:

<ul>
<li class='i-1'>first</li>
<li class='i-2'>second</li>
<li class='i-3'>third</li>
<li class='i-4'>fourth</li>
</ul>

jquery:

$('li').eq(3).insertBefore('li.i-1');

result:

<ul>
<li class='i-4'>fourth</li>
<li class='i-1'>first</li>
<li class='i-2'>second</li>
<li class='i-3'>third</li>
</ul>