鼠标拖动盒子

简单小例子：

<div id="dropArea"></div>

#dropArea {
	width: 300px;
	height: 300px;
	background-color: brown;
}

// js部分
let dragable = false;
let offsetX = 0;
let offsetY = 0;
const dropDom = document.getElementById("dropArea");
// 修改盒子背景颜色：dropDom.style.setProperty("backgroundColor","lime")
// 对于定位的属性还可以在第三个参数上写 "important" 最高权重，没有感叹号
dropDom.style.position = "absolute";
dropDom.onmousedown = () => {
	dragable = true;
	offsetX = event.clientX - dropDom.offsetLeft;
	offsetY = event.clientY - dropDom.offsetTop;
};
dropDom.onmouseup = () => {
	dragable = false;
}
dropDom.onmousemove = () => {
	if(dragable) {
		dropDom.style.left = event.clientX - offsetX + 'px';
		dropDom.style.top = event.clientY - offsetY + 'px';
	}
	// 假设这个盒子里面有图片，就需要加上阻止默认的图片不能拖动的行为
	event.preventDefault();
}
dropDom.onmouseout = () => {
	dragable = false;
}