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

时间:2015-05-24 03:08:33

标签: javascript html

我正在使用拖放功能来允许用户移动元素。当一个元素被删除时,我需要将它放在右边,如果鼠标在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库。

1 个答案:

答案 0 :(得分:0)

不确定您的问题究竟是什么。也许拉塞尔关于长度拼写错误的评论是真正的原因吗?

如果有帮助的话,我认为这就是你要找的东西: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);
            }
        }
    }
}