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/