jquery - 如何使用 jQuery 将 拖放到特定位置？

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;

或者类似的东西。