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

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 placehold开发者_StackOverflow中文版er at the end of this list.

Is this possible to do without too much trouble?

I have been trying to do the same thing. I have found what seem to be various bugs being 'too clever' with selectors to get this effect :(

But am currently using this to good effect:-

$(document.body).on("sortupdate","<selector for list>",function(event,ui) {
    if (ui.item.parent().attr('id')==$(this).attr('id')) {
        ui.item.appendTo($(event.currentTarget));
}   }   );

It allows the item to be dropped, but then moves it to the end of the container.

The sort update is called for every update in any linked container - so it needs to check that the dropped item has indeed been dropped in the container where you want the items forced to the end.

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) } )}.

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

Try to play with the accept option.