在拖放后将包含可拖动对象的div移出屏幕，并保持被拖动元素的位置

Question

我使用的是JQuery拖放。我希望将包含可拖动元素(‘element’)的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‘element’的上方显示一个视频。问题是div‘space...so’仍然占据着元素，我想把它移出屏幕。我试过用绝对定位来做这件事，但是被拖拽的元素没有被设置到它们的插槽上，它们直接出现在视频插槽的上方。

我还尝试将添加到div“插槽”中的类“left”更改为：

#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();

您可以尝试调整#drag_drop div的margin-top：

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