拖放到單獨的容器中，並調整放置元素的位置

[編輯]：解決方法在TCHdvlp的評論中給出，他的回覆如下。非常感謝！拖放到單獨的容器中，並調整放置元素的位置

我需要在這撥弄拖動從一個容器（container1）元素到另一個（container2的）和背部，如：

正如你在上面的例子中看到的那樣，當元素被連接到它的新容器時，它的'style'屬性被清除，並且它被捕捉到新容器的左上角。

$(ui.draggable).appendTo($(this)).removeAttr('style');

我希望可拖動的在新的容器中保留原位，並在此位置放置它。

但如果我刪除.removeAttr（「風格」），

$(ui.draggable).appendTo($(this));

位置信息保持，但不精確，因爲可拖動的父母發生了變化。因此，從container1下降到container2時，我的可拖動的位置要低得多，而在另一種情況下，可拖動的高得多。

根據容器的相對位置，我能夠計算我的元素應該「降落」的新位置。但我不知道如何定義這個位置。

我應該讓.removeAttr（'style'）並用新值重新創建它嗎？但是如何？
我應該刪除那部分，但修改位置值嗎？但是如何？

我一跳我清楚，你給我一些建議。

謝謝！

來源

2013-12-12 Francois Barnich

仔細閱讀所有的小提琴！可拖動的div有top:10px;left:10px; property。當它被拖動時，這些屬性會改變。當它放在另一個可放置區域時，removeAttr（'style'）;將刪除內聯樣式並設置10 * 10px的偏移量。但是，它沒有被捕捉。此外，可拖動元素爲position:absolute，但可放置區域爲position:relative這意味着子元素相對於其父元素相對定位。

這就是爲什麼，與原來的小提琴，10 * 10px的位置看起來總是相同，wathever可投放區域。

刪除在css position:relative爲容器和position:absolute爲div。在dropped功能

取出removeAttr和append因爲我們不想讓元件能夠連接到區域做，我們不使用append。我們將使用2個變量來比較去年和目前可投放區域

http://jsfiddle.net/TCHdevlp/U2nKh/576/

來源

2013-12-12 16:15:30 TCHdvlp

「_Because我們不想要的元素附加到該地區，我們不使用追加._」對不起如果我不清楚。實際上，**我希望丟棄的物品是新容器**的子物件，因此我可以輕鬆瀏覽所有放置在那裏的物件，並獲取他們的信息。 –

好吧，從你的初始小提琴開始，只需在可投放區域移除'position：relative'並移除'removeAttr（「style」）''。 http://jsfiddle.net/U2nKh/20/ – TCHdvlp

http://jsfiddle.net/U2nKh/591/對不起，上面評論中的錯誤鏈接 – TCHdvlp

拖放到單獨的容器中，並調整放置元素的位置

回答

相關問題