移除包含拖放後的div屏幕並保留拖動的元素位置

Question

我正在使用JQuery拖放操作。我想將包含可拖動元素（'元素'）的div移出屏幕，並在拖放元素後將可拖動元素放置在相應的插槽中。

現在，當所有的拖拽元素其插槽中，我謹包含插槽到div通過添加類左側，然後設置拖拽元素的位置相匹配的插槽：

$("#slots").addClass('left'); 
$("#element1").position({my: "left top",at: "left top",of: "#slot_1"}); 
$("#element2").position({my: "left top",at: "left top",of: "#slot_2"}); 
etc 

一旦這個完成後，我會在拖動元素上方呈現視頻，並在div元素上方呈現視頻。問題在於div'元素'仍佔用空間......所以我想將它移出屏幕。我嘗試過使用絕對定位進行此操作，但拖動的元素沒有設置到插槽，它們直接位於插槽上方的視頻中。

我也試着改變它被添加到div「槽」的類「左」：

#slots.left { 
position:absolute; 
top:400px; 
left:30px; 
} 

但是，這會導致不被定位在插槽拖動的元素，儘管使用：

$("#slots").addClass('left'); 
$("#element1").position({my: "left top",at: "left top",of: "#slot_1"}); 
$("#element2").position({my: "left top",at: "left top",of: "#slot_2"}); 
etc 

基本上我只是想減輕視頻和做與元素的東西拖動的元素之間的垂直空間DIV佔用那個空間......

見小提琴在http://jsfiddle.net/4pBWT/

Answer 1

你可以試着隱藏顯示視頻之前包含您拖到元素的父DIV：

$('#elements').hide(); 

Updated Fiddle

---

你可以嘗試調整的margin-top您的#drag_drop div：

$('#drag_drop').css('margin-top', '-70px'); 

Updated Fiddle