在最靠近鼠标的元素上方插入html元素

Insert html element above element closest to mouse

本文关键字：元素 插入 html 最靠近 鼠标 方插入      更新时间：2023-09-26

我使用拖放来允许用户移动元素。当一个元素被删除时，我需要把它放在鼠标位于DOM树的右边。以下是我想出来的:

var childnodes= e.target.children;
var mouse_x= e.clientX- e.target.offsetTop;
if(childnodes.lenght=== 0) e.target.appendChild(element);
else
{
    for(var i = 0; i < childnodes.length; i++)
    {
        if(childnodes[i].offsetTop > mouse_x)
        {
            e.target.insertBefore(element, childnodes[i]);
            break;
        }
        else if(i=== childnodes.length -1)  e.target.appendChild(element);
    }
}

但是由于某些原因，clientX返回不正确的值。

不确定你的问题到底是什么。也许真正的原因是Rasel关于长度拼写错误的评论?

如果有帮助，这里有一个小提琴，我认为这是你要找的:https://jsfiddle.net/ruairitobrien/v1bcabnk/

你的代码似乎在那里工作得很好。我将它添加到一个函数中，用于插入一个新创建的元素。

function insertRandomThing(e) {
    var element = document.createElement("div")
    element.innerHTML = 'X: ' + e.pageX + ' Y: ' + e.pageY;
    var childnodes = e.target.children;
    var mouse_x = e.clientX - e.target.offsetTop;
    if (childnodes.length === 0) {
        e.target.appendChild(element);
    } else {
        for (var i = 0; i < childnodes.length; i++) {
            if (childnodes[i].offsetTop > mouse_x) {
                e.target.insertBefore(element, childnodes[i]);
                break;
            } else if (i === childnodes.length - 1) {
                e.target.appendChild(element);
            }
        }
    }
}
相关文章：