javascript - 在离鼠标最近的元素上方插入 html 元素

Question

我正在使用拖放功能让用户四处移动元素。当一个元素被放下时，如果鼠标在 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 正在重新调整不正确的值。

请不要使用 JS 库。

Answer 1

不确定您的问题到底是什么。也许拉塞尔关于长度拼写错误的评论才是真正的原因？

如果有帮助，我认为这里有一个 fiddle 就是您要找的: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);
            }
        }
    }
}