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

时间:2016-12-19 23:30:13

标签: javascript jquery html jquery-ui jquery-ui-draggable

我在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?!
                          }
    });
}

现在,函数工作正常,表格被正确初始化,表格中的所有单个句柄现在都可以拖动。

问题是上述函数返回的xPosyPos值不是相对于每个字段的正确坐标,而是相加的。

我觉得我错过了一些非常明显的东西,如果有人可以提供帮助,我会非常感激。

编辑:上面的示例使用console.log进行简化。我的原始脚本在on drag事件中执行更复杂的计算。我不能使用类选择器来浏览注释中建议的所有元素,因为我需要检索每个唯一句柄ID相对于其唯一包含ID的唯一偏移量和位置值。

2 个答案:

答案 0 :(得分:1)

您可以修改。而不是offsetParent。

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

答案 1 :(得分:1)

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