像JQuery对话框一样移动div,而不重写window.onMouseMove



我目前正在开发一个框架,并且我有这个类似jquery的对话框,我希望能够用鼠标移动它。

问题是我试图不在这个项目中使用任何库或覆盖用户可能想要使用的东西。

如果我只是使用onmousemove属性的div,如果鼠标离开,而仍然拖动它-它将停止移动。是否有一种方法可以暂时覆盖window.onmousemove或其他答案?

主要思想是使用window event listener并将div样式位置设置为absolute

纯JS

var m = document.getElementById('move');
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
function mouseUp()
{
    window.removeEventListener('mousemove', move, true);
}
function mouseDown(e){
  window.addEventListener('mousemove', move, true);
}
function move(e){
  m.style.top = e.clientY + 'px';
  m.style.left = e.clientX + 'px';
};

<div id="move" >XXXX</div>
CSS

div {
    width:50px;
    height:50px;
    border:1px solid;
    position:absolute
}
演示工作

使用客户端鼠标指针的坐标,你可以用鼠标移动元素:

var x = window.event.clientX, y = window.event.clientY;
var div = document.getElementById("your_div_id");
div.style.position = "absolute";
div.style.top = y;
div.style.left = x;

注意:当坐标+div的维度高于窗口的维度时,您必须从x和y中减去div的维度,以便div将显示在指针上方或在这种情况下显示在指针左侧。即鼠标位于最底部或最右侧

最新更新