javascript - Jquery Droppable 最终不删除一个项目

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

这工作正常，但丢弃的元素放在列表的最后。如何将一个元素放在列表顶部或列表的其他元素之间。

NB

我需要首先直接删除元素或beetwen，而不是最后删除并在可排序之后切换顺序。

Answer 1

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

$("div.element-container").draggable({
    connectToSortable: "#contenitore",
    cursorAt：{左：92，上：50}，
    光标：“移动”，
    还原：“无效”，
    助手：“克隆”，
    附加到：“正文”，
     拖动：函数（事件，用户界面）{

   $(this).css({opacity:0.4});
  $(ui.helper).addClass("handled");
        },
    停止：函数（事件，用户界面）{
  $(ui.helper).removeClass("handled");
  $(this).css({opacity:1});
    }
});

$("#contenitore").sortable({
      还原：真
});