Jquery UI 元素拖放位置在第一次放置时跳转

Question

所以我正在处理这个项目，但现在我陷入困境了:(

我的问题是，当我拖放我的项目时，我需要获取/设置其相对于容器而不是整个主体的位置，所以根据我的理解，我应该使用position()。我这样做是使用

var pos=$(ui.helper).position();
objName = "#leaf"+counter++
$(objName).css({"left":pos.left,"top":pos.top});  

尽管这会在我拖入 div 后引入跳转。

我进行了这项工作，它可以使用 var pos=$(ui.helper).offset(); 给我绝对的左值和右值。并将我的容器 (#treeContainer) CSS 设置为不包含“position:relative;”尽管这给了我相对于整个页面的绝对值!

非常感谢您的回复!

Answer 1

首先，删除 #drag 对象上的定位 CSS。这些值(value)观会延续到目标对象，并与您在那里的目标相冲突。或者，您可以在 JS 代码中将这些值重置为 0。

#drag1 {
    width:74px;
    height:111px;
    float:right;
    background-color:#0F3;
}

#drag2 {
    width:74px;
    height:111px;
    float:right;
    background-color:#3C9;
}

接下来，在 JS 中，您需要使用减法将 top 和 left 值与父容器中的值进行偏移。

      var pos = $(ui.helper).offset();
      var treePos = $('#treeContainer').offset();
      objName = "#leaf" + counter++;
      $(objName).css({"left": pos.left - treePos.left, "top": pos.top - treePos.top}); 

经过这些更改，它可以正常工作。请参阅http://jsbin.com/exoqu3/6举个例子。