Jquery UI拖放元素在第一次放置时跳跃的位置答案

【问题标题】：Jquery UI Drag and Drop position of element jumps on first dropJquery UI拖放元素在第一次放置时跳跃的位置
【发布时间】：2010-11-22 18:19:42
【问题描述】：

所以我有这个正在进行的项目，现在我卡住了:(

我的问题是，当我拖放我的项目时，我需要获取/设置它相对于容器的位置，而不是整个身体，所以据我所知，我应该使用 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设置为不包含“位置：相对；”虽然这给了我相对于整个页面的绝对值！

非常感谢您的任何回复！

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

首先，移除#drag 对象上的定位CSS。这些值会延续到目标对象，并与您在那里的目标相冲突。或者，您可以在 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。

【讨论】：

嘿，感谢您的精彩回复，我已将代码添加到我的项目中，但我仍然遇到问题，但跳转要小得多。我已经用我的项目 URL 更新了我的问题，所以你可以看到整个图片，有什么想法吗？再次感谢您的回复
看起来叶子的位置相对于它们的包含元素，这是不正确的。试试这个：不要使用 .position()，而是对 pos 和 treePos 使用 .offset()。见api.jquery.com/offset

【解决方案2】：

改变

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

这与您的利润有关。和他们一起玩，我相信你会明白的。

【讨论】：

hmm 感谢您的回复，但尚未完全解决问题。我不明白为什么我只能获得相对于容器的坐标，如果它有位置：相对；，但如果我保持位置：相对；它使元素跳跃:(