Question

我无法将<DIV>拖放到特定位置。

即使我将第一个<DIV>移离初始位置，<DIV>现在也会被添加到上一个<DIV>的底部。

例如：

让我们说每个<DIV> height = 50, width = 100;

当我放下第一个<DIV>时，它会被丢弃，比如说（10,10）

下一个<DIV>下降到（10,10 + 50）。下一个（10,10 + 50 + 50）。

我希望所有<DIV>都降为（10,60）。

我的掉落功能：

drop: function(ev, ui) {
    if($(ui.draggable).is("img")){
        //$(this).css("position", "absolute");
        $(this).position().left = 85;
        $(this).position().top = 338;
        //$(this).css("position", "relative");
    }

});

如果我将位置设置为绝对位置。它将它放在指定的位置，但不会发生进一步的拖放。

你们能提供一些帮助吗？提前谢谢。

更新：这是我的html代码，包含三个div和左div和右div的样式。除了高度之外，主div没有特别的风格。

<div id="maindiv" style="height:500px">
  <div id="left">
     <img id="1" src="/1.png"/>
     </div> <!-- Left Div End -->
 <div id="content">

 </div> <!-- Content End -->
 </div> <!-- main div End-->

内容风格：

content {
    border:2px solid #DFA214;
    float:right;
    height:400px;
    margin:1px;
    overflow:auto;
    position:relative;
    width:74%;
}

如果我将位置更改为绝对值，则拖放功能不会进一步发挥作用：

left {
    border:2px solid #DFA214;
    float:left;
    height:400px;
    margin:1px;
    position:relative;
    width:24%;
}

Answer 1

当你移动相对时，你仍然占据原始空间（即使它看起来是空的）。您需要更改DOM中的元素逻辑位置。

实际上，在重新阅读你的问题时，你正在移动亲属，所以你需要在设定目标位置时考虑原始位置。

$(this).position().left = 85 - $(this).position().left;

或类似的东西。

Answer 2

属性top，bottom，left和right仅在position设置为fixed，absolute和relative时才有效。要将元素设置为固定位置，唯一的方法是使用绝对值。也许必须改变拖放。

Answer 3

尝试将您想要移动的所有div放入容器div中。每个儿童div都应该有相关的定位。然后改变父母的大小。

如何使用jQuery在特定位置拖放<div>？</div>

3 个答案: