我目前正在尝试使用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";
}
答案 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().*