jQuery可拖动位置 - 克隆答案

【问题标题】：Jquery draggable position - clonejQuery可拖动位置 - 克隆
【发布时间】：2011-05-10 11:17:27
【问题描述】：

我有 jquery draggable/droppable 与包含和帮助选项集一起工作。我想做的是将放置的项目的顶部和左侧参数存储在两个变量中。

我在下面的示例中实现了这一点（将新文档图标拖到框中）但是报告回来的位置是相对于原始图标而不是父 DIV 的位置。图标和可放置框都是绝对定位的。

http://www.instructuk.com/drop.php

有谁知道如何获取与父级相关的位置而不是图标？

【问题讨论】：

标签： jquery jquery-ui-droppable

【解决方案1】：

您必须自己进行计算：

var
  draggableDocumentOffset = ui.helper.offset(),
  droppableDocumentOffset = $(this).offset(),
  left = draggableDocumentOffset.left - droppableDocumentOffset.left,
  top = draggableDocumentOffset.top - droppableDocumentOffset.top;

alert('Item was dropped at - Left: ' + left + ', Top: ' + top);

【讨论】：

@brianpeiris，我可以请你看一下这里的 jQuery 拖放相关问题：stackoverflow.com/questions/54498364/… 吗？

【解决方案2】：

这可能不是最漂亮的解决方案，但您可以通过以下方式获取文档中放置的位置：

x=event.pageX;
y=event.pageY;

然后用droppble区域的坐标减去x和y。

dx=$("#droparea").offset().left;    
dy=$("#droparea").offset().top;    
var left=x-dx;          
var top=y-dy;

【讨论】：

请注意，此计算的输出将根据您开始拖动时将光标放在图标中的位置而改变。
确实如此。您的解决方案要好得多。