JS 实现 div 自由拖拽

实现鼠标可以自由拖拽页面中的元素（比如div，图片等），首先为要拖动的元素设置 css 为绝对定位（或者使用transform，但使用绝对定位更常见），然后需要用到三个事件：mousedown, mousemove 和 mouseup。

实现思路：

a) 页面中添加一个div，作为容器，容易的class 设置为 container，并将其设置为相对定位；

b) 在 container 中添加一个div，作为拖拽的目标，并将其设置为绝对定位；

c) 给推拽目标添加 mousedown 事件，mousedown 事件记录鼠标按下的坐标；

d) mousedown 函数中，注册 mousemove 和 mouseup 事件;

e) mousemove 事件中，记录鼠标坐标，并与mousedown事件的起始坐标计算，得出移动的距离，根据这个距离重新给拖拽目标设置定位；

f) mouseup 事件中取消 mousemove、mouseup 事件。

具体实现

HTML

<div class="container">
   <div class="el"></div>
</div>

CSS

.container {
	position: relative;
	width: 100vw;
	height: 100vh;
}

el {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	background: red;
}

var el = document.querySelector('.el');
el.addEventListener('mousedown', mouseDown);
var startX, startY, offsetX, offsetY;

function mouseDown(e) {
	  startX = e.clientX;
	  startY = e.clientY;
	  offsetX = el.offsetLeft; //记录原始位置
	  offsetY = el.offsetTop;
	  document.addEventListener('mousemove', mouseMove);
	  document.addEventListener('mouseup', mouseUp);
}

function mouseMove(e) {
	  var x = e.clientX - startX;
	  var y = e.clientY - startY;
	  el.style.left = offsetX + x + 'px';
	  el.style.top = offsetY + y + 'px';
}

function mouseUp(e) {
    	          document.removeEventListener('mousemove', mouseMove);
    	  document.removeEventListener('mouseup', mouseUp);
}

THE END