检测元素上的拖动位置

Question

我正在构建一个wysiwyg编辑器来构建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;
    }
}

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