检测元素上的拖动位置

Question

我正在构建一个所见即所得的编辑器来构建 html 电子邮件。我希望能够通过拖放将行布局添加到编辑器。

如果一行被拖放到放置目标的中点以上，我想在放置目标之前添加一行；如果它下降到中点以下，我想在下降目标之后追加一行。

有什么办法吗？

Answer 1

您可以使用 getBoundingClientRect() 获取元素的坐标，同时按下鼠标按钮并像这样简单地移动

element.onClick = function() {
    element.onmousemove = function() {
        var x1 = element.getBoundingClientRect().left,
            x2 = x1 + element.getBoundingClientRect().width,
            y1 = element.getBoundingClientRect().top,
            y2 = element.getBoundingClientRect().height;
    }
}

现在你可以用这些坐标做任何你想做的事了。