Jquery可拖动附加到新容器

Question

我在父div中有一个div，用户可以从dropbox拖到final_dest。用户还可以通过单击按钮创建新项目。单击按钮会将新div添加到dropbox。

<div id='#dropbox'>
      <div id='item_1'>Some Item</div>
</div>

<div id='final_dest'></div>

如果用户将item_1拖到另一个容器，我如何将其从dropbox中删除并将其放入final_dest？

            $('#item_'+a).draggable({ // make this whole damn thing draggable
                    drag:function(event){
                            helper:"clone",
                            jsPlumb.repaintEverything();
                    },
                    stop:function(event,ui){
                                    $('this').detach('#dropbox');
                                    $('this').append('final_dest');

                    }

            });

我尝试过使用分离，但无法弄清楚如何从dropbox div中删除它。

问题是如果用户将item_1拖到final_dest，然后创建一个新的item_2 div，它会显示在drop_1中item_1的位置下方。我试图让它出现在item_1所做的位置。它会这样做，因为item_1不会从Dropbox中删除。

Answer 1

您将需要收集您的原始和目标元素，调用分离，设置CSS，并在附加到容器的drop事件上调用您的附加内容，如下所示：

$(".droppable").droppable({
    accept: ".draggable", drop: function (event, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn);
    }
});

可以在这里找到完整的工作示例：

https://jsfiddle.net/gdkx7861/1/