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.

Its always at the end because you use `appendTo`. That's what it does ! What if you combine draggable with sortable ? http://jqueryui.com/draggable/#sortable. Make your droppable also draggable and limit it to itself. — TCHdvlp, Aug 09 '13 at 00:12
this solution cause a incredible fastidious flikering beetwen item in the container, because the container contain an other kind of item sortable. — Il Profeta Profeta, Aug 09 '13 at 00:46

score 1 · Answer 1 · answered Aug 09 '13 at 00:25

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

answered Aug 09 '13 at 00:25

AgentSQL

2,810
20
22

the containe is already sortable becouse contains an other kind of item, and if i connect all this solution cause a incredible fastidious flikering beetwen item in the container. – Il Profeta Profeta Aug 09 '13 at 00:49
You should remove droppable to #contenitore. Droppable is not needed in your condition. Look at [jsfiddle](http://jsfiddle.net/abzYK/206/) – AgentSQL Aug 09 '13 at 01:08
i need droppable for recognize some event that only droppable have,for execute other necessary function. And droppable prevent flikering beetwen item in the container. – Il Profeta Profeta Aug 09 '13 at 01:14
but your example in jsfiddle semms interesting – Il Profeta Profeta Aug 09 '13 at 01:18
but i ve not 2 different container, i ve only one container and 2 different kinds of item will draggend and droppend only in it – Il Profeta Profeta Aug 09 '13 at 01:31

Jquery Droppable Drop an item not at last

1 Answers1