jquery可拖拽附加到新容器

我有一个div div内的父div，用户可以从dropbox拖到final_dest。用户也可以通过点击按钮来创建新项目。按钮点击将新的div添加到保存箱中。jquery可拖拽附加到新容器

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

        } 

      });

我曾尝试使用detach，但无法弄清楚如何将其从保管箱div中删除。

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

来源

2017-07-24 bart2puck

您需要提供更多详细信息。我尝试重新创建[jsfiddle]（https://jsfiddle.net/3uxepwhb/）上的情况，但我没有看到幻像“item_1”存在的任何方法。你可以创建一个可运行的堆栈片段来说明问题吗？ –

是的，我可以在几个小时内。基本上问题是，当我创建一个新的div时，它会出现在灰色框中。如果我在屏幕上拖动它，然后创建另一个新的div，我希望该新的div显示在灰色框中。不低于第一格是... – bart2puck

您将需要收集你的出发地和目的地的元素，称之为分离，设置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/

来源

2017-07-27 23:03:03

jquery可拖拽附加到新容器

回答

相关问题