Force LI to end of list with jQuery connected sortable lists using placeholder

Question

I an using jQuery to create connected sortable lists to create a main menu for a website. The left hand list contains available pages and the right hand list contains the current menu structure. I am using placeholders to highlight the location where the user needs to drop the item.

At the moment the user can add an item from the left list to any position on the right list.

I would like to be able to force the user to only be able to add an item from the left list to the end of the right list by only displaying the placeholder at the end of this list.

Is this possible to do without too much trouble?

Answer 1

You may want to try jQuery UI: see the demo of the droppable feature.

Try to play with the accept option.

Answer 2

By the sounds of your post, it seems to me that the philosophy behind ui-sortable is in conflict with your design aims. Consider ui-draggable (left LIs) and ui-droppable (right UL) instead. Then simply { drop: function(e,ui) { $(this).append(ui.draggable) } )}.