拖拽效果

拖拽

鼠标移动到box上,按下鼠标左键,移动鼠标,box开始跟着鼠标移动
鼠标按钮抬起,box不再移动

注意:

计算box移动时, 当前box的位置 + 两个坐标的差
box移动后, 要更新起始坐标位置

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
 /* 清除默认样式 */ 
 *{margin: 0;padding: 0;} 
 #box{ 
 width: 300px; 
 height: 300px; 
 background: pink; 
 cursor: move; 
 position: absolute; 
 top: 0; 
 left: 0; 
 } 
</style> 
</head> 
<body> 
<!-- 写div --> 
<div id="box"> 拖我一下试试!!! </div> 
<script> 
 var flag = false;// 默认值为false,box不跟随鼠标移动; 为true,box跟随鼠标移动 
 
 var box = document.getElementById('box'); 
 // 记录鼠标按下的坐标位置 
 var x1 = 0; 
 var y1 = 0; 
 // 当鼠标移动到box上时并且按下, 设置flag为true 
 box.onmousedown= function (e) { 
 flag = true;//允许跟着鼠标移动 
 // 记录当前位置 
 x1 = e.pageX; 
 y1 = e.pageY; 
 }; 
 // 当鼠标抬起, 设置flag为false 
 box.onmouseup= function (e) { 
 flag = false;//不允许跟着鼠标移动 
 }; 
 // 当鼠标被甩飞, 设置flag为false 
 box.onmouseout= function (e) { 
 flag = false;//不允许跟着鼠标移动 
 //console.log('鼠标飞走了...'); 
 }; 
 
 
 // 跟随鼠标 
 box.onmousemove = function (e) { 
 if(flag){ 
 //获取鼠标坐标 
 var x2 = e.pageX; 
 var y2 = e.pageY; 
 //console.log(x, y); 
 
 //设置box的位置 
 // 坐标位置 = box的现在位置 + (x2-x1) + 'px'; 
 box.style.top = box.offsetTop + (y2-y1) + 'px';//注意单位 
 box.style.left = box.offsetLeft + (x2-x1) + 'px';//注意单位 
 } 
 // 更新box的起始位置 
 x1 = x2; 
 y1 = y2; 
 }; 
</script> 
</body> 
</html> 