javascript - 拖放 div 元素效果不佳

Question

我创建了一个简单的代码来拖放 div 元素，但效果不佳。
当你快速拖动 div 元素到任意方向top时，, left, right, down，鼠标光标会离开 div 元素，虽然我仍然按下按钮。

HTML

<div id="box"></div>

CSS

div#box {
  background-color:yellowgreen; 
  width:150px; height:100px; 
  border:1px solid #ffff66; 
  position:relative; 
}

JavaScript

var elem = document.getElementById('box');
var PositionX = 0;
var PositionY = 0;
var MouseX = 0
var MouseY = 0;
var mouseDown = false;

elem.onmousedown = function(e) {
    PositionX = elem.offsetLeft;
    PositionY = elem.offsetTop;
    MouseX = e.clientX;
    MouseY = e.clientY;
    mouseDown = true;
};

elem.onmousemove = function(e) {
    if (mouseDown) {
    elem.style.left = PositionX + e.clientX - MouseX + "px";
    elem.style.top = PositionY + e.clientY - MouseY + "px";
  }
};

elem.onmouseover = function(e) {
    elem.style.cursor = 'move';
};

elem.onmouseup = function(e) {
    mouseDown = false;
};

你可以在网上看到

Answer 1

试试这个希望它能完成你的工作：

var elem= document.getElementbyId('<%=box.ClientID%>');
elem.onmousemove= function(e) {
    if (mouseDown) {
    elem.style.left = PositionX + e.clientX - MouseX + "px";
    elem.style.top = PositionY + e.clientY - MouseY + "px";
  }
};

Answer 2

尝试更改这一行：

elem.onmousemove = function(e) {

至：

document.onmousemove = function(e) {