CODEWITHSUNDEEP
javascriptjqueryjquery-uidrag-and-dropjquery-droppable
Il Profeta Profeta
Il Profeta Profeta

Reputation: 312

Jquery Droppable Drop an item not at last

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.

Upvotes: 0

Views: 232

Answers (1)

AgentSQL
AgentSQL

Reputation: 2940

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

Upvotes: 1

Related Questions