Question

我有这种可放置的可拖动HTML元素的组合

可投放

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

拖动

 $( "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});
    }
});

工作正常，但掉落的元素掉落在最后一个列表中。如何将一个元素放在列表顶部或beetwen列表的其他元素。

n.b。

我首先需要直接丢弃元素或beetwen，并且最后不要掉线并在排序后切换订单。

Answer 1

使你的div.element-container可拖动+可排序。你可以这样做 -

$("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
});

Jquery Droppable最后丢弃一个项目

1 个答案: