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;
};

You can see online

Answer 1

尝试更改这一行：

elem.onmousemove = function(e) {

为：

document.onmousemove = function(e) {

Answer 2

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

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";
  }
};

拖放div元素不能很好地工作

2 个答案: