JQuery可拖动/可拖放：drop div不获取被拖动项的所有权

我正在为我的孩子们的夏令营设计一个应用程序，它可以让辅导员在一个更大的活动分组中把一个露营者的名字从一个活动拖到另一个活动。我使用的是JQuery draggable和droppable，除了一件事：将项目拖动到不同的droppable容器后，文档不会更新。我创建了一个JSFIDLE，它显示了以下行为：

为了演示我所问的行为，请走到小提琴前，将“Mattias Jabs”从烹饪拖到Krav Maga。然后单击Save，并检查控制台日志：您将看到“DBG:CamperID4在这里！”记录的是ChugID3，而不是2，尽管我们在UI中将Camper4从3移动到了2

我认为应该在这里的某个地方进行修复：

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

我尝试按照一些建议从原始容器中分离，但这只会导致露营者分离-他仍然没有出现在“拖到”容器中（之后露营者图标也变得不可移动-我希望用户能够在单击“保存”之前移动露营者任意次数）

我尝试按照建议，在.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);

这确实将删除的项移动到了新位置，但当我查询删除到div标记的内容时，被拖动的项仍然没有注册。此外，无法再移动拖动的项目。OTOH，拖动的项目确实从源代码中消失了，所以看起来这可能是正确的轨迹

---

任何帮助都将不胜感激-谢谢

你很接近答案。问题在于您添加的行：

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

到

---

find

方法查找与选择器匹配的子元素，而

addBack

方法会在元素与选择器匹配的情况下添加回最初放置的元素

非常感谢，bytesized-这解决了我的问题！我真的很感激！用电影《真正的天才》中的瓦尔·基尔默/克里斯·奈特的话说，当他拿到加州理工学院物理考试的答案时：“我什么都没给你！”：-）@DavidLobron没问题，很高兴我能帮上忙。如果这个答案解决了你的问题，你应该考虑接受或支持它。再次感谢您的帮助。

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