jQuery UI Draggable：获取大量动态创建元素的拖动偏移

Question

我正在 DOM 中创建一个 <table> 元素，并使用 javascript 向其动态附加许多单元格。为了便于解释，假设我创建了 10 行，每行 10 个字段。我使用简单的计数器为这些字段内的 div 容器分配唯一 ID。很容易。这是我得到的：

<table>
    <tr><td><div id="field0"><div id="handle0"></div></div></td></tr>
    .....
    <tr><td><div id="field99></div id="handle99"></div></div></td></tr>
    </table>

请注意，数字 0-99 是动态附加到每个元素 ID 的数字。我现在想继续将 jQueryUI .draggable 函数附加到每个句柄，并检索每个句柄相对于每个周围父级 div 的坐标，如下所示：

for (var counter = 0; counter < 100; counter++) {
var dragHandle = $('#handle' + counter);
var dragField = $('#field' + counter);
    dragHandle.draggable({
                    containment: dragField,
                    scroll: false,
                    drag: function () { 
                             var offset = $(this).offset();
                             var xPos = (offset.left) - $(this).offsetParent().offset().left;
                             var yPos = (offset.top) - $(this).offsetParent().offset().top;
                                  console.log(xPos); 
                                  console.log(yPos); // These add up?!
                          }
    });
}

现在，函数可以正常工作了，table 得到了正确的初始化，table 中的所有 individual 句柄现在都可以拖动了。

问题是上述函数返回的xPos和yPos值不是相对于每个字段的正确坐标而是他们加起来。

我觉得我遗漏了一些非常明显的东西，如果有人能提供帮助，我将不胜感激。

编辑： 上面的示例使用 console.log 进行简化。我的原始脚本在拖动事件中执行更复杂的计算。我将无法像评论中建议的那样使用 class 选择器遍历所有元素，因为我需要检索每个唯一句柄 ID 相对于其唯一包含 ID 的唯一偏移和位置值。

Answer 1

您可以修改而不是 offsetParent。

var xPos = (offset.left) - $(this).parent().offset().left; var yPos = (offset.top) - $(this).parent().offset().top;

Answer 2

var xPos=(offset.left)-$(this).position( ).left var yPos=(offset.top)-$(this).position( ).top

jQuery UI Draggable：获取大量动态创建元素的拖动偏移

jQuery UI Draggable: Get drag offset of A LOT of dynamically created elements

html

javascript

jquery

jquery-ui

jquery-ui-draggable