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可拖拽附加到新容器

回答

相關問題