关于鼠标拖动div第二次点击无法拖拽问题

以下为问题代码

window.onload = drag; function drag() { var box = getclassName("box")[0]; box.style.left = 500 + "px"; box.style.top = 200 + "px"; box.onmousedown = moveBox; //鼠标按下事件 } function moveBox(event) { var box = getclassName("box")[0]; var event = event || window.event; disX = event.clientX - box.style.left, //点击时的坐标差 disY = event.clientY - box.style.top; maxW = document.documentElement.clientWidth || document.body.clientWidth, //限制移动的最大宽度 maxY = document.documentElement.clientHeight || document.body.clientHeight; console.log("event.clientX: " + event.clientX); console.log("box.style.left: " + box.style.left); console.log("event.clientX + box.style.left: " + event.clientX + box.style.left); console.log("disX: " + disX); document.onmousemove = function(event) { var event = event || window.event; var posX = event.clientX - disX, //移动后BOX最终的坐标 posY = event.clientY - disY; if(posX < 0) { posX = 0; } else if(posX > maxW) { posX = maxW; } if(posY < 0) { posY = 0; } else if(posY > maxY) { posY = maxY; } box.style.left = posX + "px"; box.style.top = posY + "px"; document.onmouseup = function() { //释放鼠标 document.onmousemove = null; document.onmouseup = null; document.onmousedown = null; } } }

在得出disX和disY计算值时因为event.clientX、box.style.left两者计算类型不行，导致结果为NaN类型。

解决办法是使用parseInt() 方法，把box.style.left转成数值类型。

if(isNaN(parseInt(box.style.left))) { disX = event.clientX - box.style.left; disY = event.clientY - box.style.top; } else { disX = event.clientX - parseInt(box.style.left); disY = event.clientY - parseInt(box.style.top); }