获取另一个元素的元素

时间:2017-07-13 12:03:44

标签: javascript html css3

我目前正在尝试使用javascript创建自己的拖放功能(使用事件监听器),并且我面临一个问题:当我开始拖动我的元素时,我无法访问知道我在哪里,因为我拖动的元素在我的光标前面。

我想知道是否可以在不受拖动元素影响的情况下获取光标位置。

注意:我无法使用Jquery来实现此目标

谢谢,

编辑:我的代码

var i = 0;
window.addEventListener('mousedown', startDrag);
var leftMarg = document.getElementById('moving').offsetWidth / 2;
var topMarg = document.getElementById('moving').offsetHeight / 2;

function stopDrag(e) {
    window.removeEventListener('mousemove', dragging);
    window.removeEventListener('mouseup', stopDrag);
    window.removeEventListener('mousemove', grabbing);
}

function startDrag() {
    window.addEventListener('mouseup', stopDrag);
    window.addEventListener('mousemove', grabbing);
}

function grabbing(e) {
    for (let i = 1; i < document.getElementById("test").children.length; i++) {
        if (document.getElementById("test").children[i].contains(e.target)) {
            document.getElementById("moving").style.visibility = "visible";
            document.getElementById("moving").innerText = e.target.innerText;
            window.removeEventListener('mousemove', grabbing);
            window.addEventListener('mousemove', dragging);
        }
    }
}

function dragging(e) {
    document.getElementById("moving").style.left = (e.x - leftMarg) + "px";
    document.getElementById("moving").style.top = (e.y - topMarg) + "px";
}

1 个答案:

答案 0 :(得分:0)

在收听onmousemove事件时,您可以使用event.clientX / Y获取鼠标位置。示例如下:https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onmousemove(还包含拖放示例)和此处:https://jsfiddle.net/qf4atst5/

您需要计算clientX / Y - 元素的left / topOffset以获取相对于元素的鼠标位置。:

element.addEventListener("mousemove", function(e) {
    xpos = e.clientX - e.target.getBoundingClientRect().top;
    ypos = e.clientY - e.target.getBoundingClientRect().left;
    element.innerText = "x=" + xpos + ", y=" + ypos;
});

不需要jQuery

PS:要取得鼠标位置,请移除e.target.getBoundingClientRect().*