Javascript Jquery Droppable最终不删除项

我发现了这种可拖放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});
    }
});

这很好，但是被删除的元素曾经在列表的最后一个被删除过。 如何将一个元素放在列表顶部或列表的其他元素

n、 b

我需要先直接删除元素，否则，

---

最后不要放弃，使用sortable切换顺序。

使您的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 }); $（“div.element-container”）。可拖动({ connectToSortable:“#contenitore”， 光标：{左：92，上：50}， 光标：“移动”， 回复：“无效”， 助手：“克隆”， 附：“身体”， 拖动：函数（事件、ui）{ $（this.css（{opacity:0.4}）； $（ui.helper）.addClass（“已处理”）； }, 停止：功能（事件、用户界面）{ $（ui.helper）.removeClass（“已处理”）； $（this.css（{opacity:1}）； } }); $（“#contenitore”）。可排序({ 回复：真 });

---

它总是在末尾，因为您使用了

appendTo

。它就是这样做的！如果您将draggable与sortable结合起来呢。使您的可拖放也可拖放，并将其限制在自身范围内。此解决方案会对容器中的项目造成令人难以置信的挑剔的飞行，因为容器包含另一种可排序的项目。容器已可排序，因为它包含另一种项目，如果我连接所有这些解决方案，会导致容器中出现令人难以置信的挑剔的飞行物。你应该移除可放置到#contenitore的物品。在您的情况下，不需要使用Dropable。看看我需要droppable来识别一些只有droppable才有的事件，来执行其他必要的函数。和Dropable-prevent-fliker-beetwen-item在容器中。但是您在JSFIDLE semms中的示例很有趣，但我没有两个不同的容器，我只有一个容器，两种不同的项目将仅在其中拖放