我在一个 Javascript/jQuery 问题上苦苦挣扎了大约两周,这让我发疯了。我需要多个 div 才能在容器 div 中拖动。如果您移动一个 div,其他 div 也会随之移动,无论放在容器中的哪个位置。现在,有两个问题:
1)第一个元素被丢弃了,它的左上角捕捉了鼠标指针,但这很好。但是,当删除更多 div 时,它们会偏移到 y 轴上的正确位置。不是 x 轴,这是有效的。有趣的是,偏移量正好是红色 div 的高度,50 像素。然后,第三个删除的 div 具有 100 像素的偏移量,第四个 150 像素,依此类推。
2)当拖动一个 div 时,其他 div 在 x 和 y 坐标上都得到了我无法解释的偏移。
看看:http: //jsfiddle.net/6v3hR/7/
我包括了鼠标指针位置,这便于调试/位置检查。由于问题 2) 发生在启动函数中,因此我将坐标输出到控制台。他们是正确的!您可以通过将鼠标指针移至相应位置并检查显示的坐标对来进行检查。
代码说明:
start: function () {
$('.drag_inside').each(function (idx) {
$(this)[0].originalX = $(this).offset().left;
$(this)[0].originalY = $(this).offset().top;
console.log('dragging start originalX ' + idx + ' :' + $(this)[0].originalX);
});
每次在容器 div 中拖动红色 div 时,都会调用 start。在这里,我将位置保存在开始处,即原始位置,因此命名为 originalX 和 originalY。我把它放在 jQuery 对象中以便在拖动事件函数中使用它:
drag: function (e, ui) {
var offsetY = $(this).offset().top - $(this)[0].originalY;
var offsetX = $(this).offset().left - $(this)[0].originalX;
$('.drag_inside').each(function (idx) {
$(this).css({
top: $(this)[0].originalY + offsetY,
left: $(this)[0].originalX + offsetX
});
});
}
在这里,我通过 css 函数通过 each 函数计算偏移量并更新所有 div 的位置。这实际上很好,痛苦的偏移是存在的,但运动是真正平行的。
有一个插件,multidraggable。它真的很好,但它不能与最近的 jQuery 1.9+ 版本一起使用。
非常感谢任何帮助。