Question

我正在为我的孩子们的夏令营申请，这应该让辅导员在更大的活动分组中将露营者的名字从一个活动拖到另一个活动。我正在使用JQuery draggable和droppable，并且它运行良好，除了一件事：在我将一个项目拖到另一个可放置的容器之后，文档不会更新。我创建了一个显示行为的jsfiddle：

https://jsfiddle.net/1sbuv82q/

为了证明我所询问的行为，请去小提琴，然后将“Mattias Jabs”从Cooking转到Krav Maga。然后单击Save，并检查控制台日志：您将看到“DBG：Camper ID 4在这里！”记录为Chug ID 3而不是2，即使我们在用户界面中将露营车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);

确实将已删除的项目移动到新位置，但是当我查询drop-to div标记的内容时，拖动的项目仍未注册。此外，无法再移动拖动的项目。 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

JQuery draggable / droppable：drop div不取得拖动项

1 个答案: