jquery - Obey to the order being dropped and display placeholder while dropping with jQueryUI draggable/droppable -

I have two unordered lists with the necessary functionality; 1) can not be sorted in the left pane (#sortable) self-2) can be sorted in the right panel (# sortable1) self-3) can be used to drag the item from the left panel and left on the right side panel 4) The item can be bitten by dragging the right panel and left on the panel to the left. 5) A placeholder should be available to drop dragged items anywhere between the objects on the right panel.

At the moment, the following code is 1,2,3,4 it is placed at the top of the list of the items on the right has currently dropped it comes to 5 (with Preepend).

What I do not know, how can it be left anywhere in the list (not just beginning or ending) and there is a placeholder in it when the item is dragged into the panel on the right?

JQUERY

  $ ('# sortable li'). Draggable ({cursor: 'indicator', connect: '# sortable1', accessory: 'clone', opacity: 0.5, zandex: 10}); $ ('# Sortable1') Sorted ({connectWith: '#sortable', cursor: 'indicator', prevention: '# sortable1'}). Accept Droppable ({: '#sortable li', activeClass: 'highlight' drop: function (event, ui) {var $ li = $ ( '& lt; li & gt;'). AddClass ( 'UI-Stet- Highlight ') .HTML (ui.draggable.html ()); $ li.prependTo (this);}}); });   
 HTML      
 Any help would be appreciated.   
 
 
 Use the Connect option with the Jquery draggable option instead of using it. It will have two advantages over your current code.  
 
 You will get the required procedure that you are seeing without affecting other functionalities.  
 You do not have to define your # sortable1 as a dropplab