jquery - 放置后将 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' 更改为：

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

更新小提琴

---

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

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

更新小提琴