Question

我在Javascript / jQuery问题上花费了大约两个星期的时间，这让我感到疯狂。我需要在容器div中可拖动多个div。如果你移动一个div，其他人只需移动它，无论放在容器中的哪个位置。现在，有两个问题：

1）第一个元素被精细地删除，它的上部lefter角点击鼠标指针，但这很好。但是当丢弃更多div时，它们偏移到y轴上的正确位置。不是x轴，这是有效的。有趣的是，偏移正好是红色div的高度，50像素。然后第三个丢弃的div具有100像素的偏移，第四个150像素，依此类推。

2）当拖动一个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函数通过每个函数更新所有div的位置。这实际上很好，有痛苦的偏移，但运动确实是平行的。

有一种笨拙的，多层次的。这真的很好，但它不适用于最近的jQuery 1.9+版本。

任何帮助都非常感激。

Answer 1

我可能会仔细看看，但我的第一个建议是不用jQuery计算偏移量。这肯定应该用CSS完成。由于90％的jQuery是为了实现这一目标，我会说你在这里过分复杂了你的问题。

jQuery draggable并行移动多个div

1 个答案: