我正在创建一个 <table>
DOM 中的元素并使用 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?!
}
});
}
现在,函数可以工作了,表格得到了正确的初始化,表格中的所有单独句柄现在都可以拖动了。
问题是xPos
和 yPos
上述函数返回的值不是相对于每个字段的正确坐标,而是它们相加。
我觉得我遗漏了一些非常明显的东西,如果有人能提供帮助,我将不胜感激。
编辑: 上面的示例使用 console.log 进行简化。我的原始脚本在拖动事件中执行更复杂的计算。我将无法像评论中建议的那样使用类选择器遍历所有元素,因为我需要为每个唯一句柄 ID 检索相对于其唯一包含 ID 的唯一偏移和位置值。
最佳答案
var xPos=(offset.left)-$(this).position( ).left var yPos=(offset.top)-$(this).position( ).top
关于javascript - jQuery UI 可拖动 : Get drag offset of A LOT of dynamically created elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41232654/