移除包含拖放后的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