JQuery 可拖动/可放置 : drop div not taking ownership of dragged item

Question

我正在为我的 child 的夏令营开发一个应用程序，该应用程序应该允许辅导员将营员的名字从一个事件拖到一个更大的事件组中的另一个事件。我正在使用 JQuery draggable 和 droppable，它运行良好，除了一件事:在我将一个元素拖到不同的 droppable 容器后，文档没有更新。我创建了一个显示行为的 jsfiddle:

https://jsfiddle.net/1sbuv82q/

要演示我所询问的行为，请转至 fiddle ，将“Mattias Jabs”从“ cooking ”拖到“马伽术”。然后单击保存，并检查控制台日志:您将看到“DBG:Camper ID 4 is here!”记录了 Chug ID 3，而不是 2，即使我们在 UI 中将 camper 4 从 3 移到了 2。

我认为修复应该在这里的某个地方:

$el.sortable({
    connectWith: '.chugholder'
  });
  $el.droppable({
    accept: "ul.gallery li",
    activeClass: "ui-state-active",
    hoverClass: "ui-state-hover"
  });

我尝试按照一些建议从原始容器中分离出来，但这只会导致露营者分离​​ - 他仍然没有出现在被拖到的容器中(之后露营者图标也变得不可移动 - 我希望用户能够在他们点击保存之前随意移动露营车)。

我尝试遵循建议 here ，向 .droppable 添加一个“drop”函数:

$el.droppable({accept: "ul.gallery li",
             activeClass: "ui-state-active",
             hoverClass: "ui-state-hover",
             drop: function(event, ui) {
             var droppedOn = $(this);
             var dropped = ui.draggable;
             droppedOn.addClass("ui-state-highlight");
             $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
        }
);

此行试图将拖动的元素从其旧的 div 中分离出来，然后将其附加到新的 div 中:

$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

确实把拖放的item移动到了新的位置，但是当我查询dropped-to div标签的内容时，拖放的item还是没有注册。此外，无法再移动被拖动的元素。 OTOH，拖动的元素确实从源中消失了<div> ，所以这似乎是正确的轨道。

非常感谢任何帮助 - 谢谢!

Answer 1

您非常接近答案。问题在于您添加的行:

// Let chug holders be droppable.                    
$('.chugholder').each(function() {
  var $el = $(this);
  $el.droppable({
    accept: "ul.gallery li",
    activeClass: "ui-state-active",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
         var droppedOn = $(this);
         var dropped = ui.draggable;
         droppedOn.addClass("ui-state-highlight");
         $(dropped).detach().css({top:0,left:0}).appendTo(droppedOn);
    }
  });

当您获得 droppedOn 时，您可能获得了 .chugholder。你不想把拖放的 li 放在 div.chugholder 里，你想把它放在 ul.gallery 里。因此只需更改

 var droppedOn = $(this);

到

 var droppedOn = $(this).find(".gallery").addBack(".gallery");

find 方法找到与选择器匹配的子元素，如果元素也与选择器匹配，addBack 方法添加回最初放置的元素。 JSFiddle