Jquery Droppable Drop an item not at last

Question

I ve this combination of droppable draggable HTML elements

droppable

$( "#contenitore" ).droppable({
  hoverClass: "drag-over_ca",
  tolerance: 'pointer',
   greedy: true,
  drop: function( event, ui ) {
  $(ui.draggable).appendTo( this );
   }
});

draggable

 $( "div.element-container" ).draggable({
    cursorAt: { left: 92, top: 50} ,
    cursor: "move",
    revert: "invalid",
    helper: "clone", 
    appendTo: "body", 
     drag: function(event, ui) {

   $(this).css({opacity:0.4});
  $(ui.helper).addClass("handled");
        },
    stop: function(event, ui) {
  $(ui.helper).removeClass("handled");
  $(this).css({opacity:1});
    }
});

that works fine, but the dropped elemente put ever dropped at the last of list. How can drop an element at top of list or beetwen other element of the list.

n.b.

I need directly drop element at first or beetwen, and not drop at last and switch the order after with sortable.

Answer 1

Make your div.element-container draggable + sortable. You can do it like -

$("div.element-container").draggable({
    connectToSortable: "#contenitore",
    cursorAt: { left: 92, top: 50} ,
    cursor: "move",
    revert: "invalid",
    helper: "clone", 
    appendTo: "body", 
     drag: function(event, ui) {

   $(this).css({opacity:0.4});
  $(ui.helper).addClass("handled");
        },
    stop: function(event, ui) {
  $(ui.helper).removeClass("handled");
  $(this).css({opacity:1});
    }
});

$("#contenitore").sortable({
      revert: true
});