js的鼠标拖拽例子

鼠标事件-拖拽事件

一个简单的div拖拽例子。
html

<div id="dv"></div>

css

/* 给上div的一些属性，方便查看是否达到预期效果。*/
*{margin: 0px;padding: 0px;}
#dv{
	width: 200px;
	height: 200px;
	background: #ccc;
	position: absolute;
	top: 0px;
	left: 0px;
		}

js

let dv = document.getElementById("dv");//绑定div

let isDown = false;//判断鼠标是否按下

let x = 0;
let y = 0;//获取鼠标位置

let l = 0;
let t = 0;//获取div左上角点的位置

dv.onmousedown = function(e){//按下鼠标进行拖拽
	var event = e || window.event;
	
	x = event.clientX;
	y = event.clientY;
	
	l = dv.offsetLeft;
	t = dv.offsetTop;
	 
	isDown = true; 
	dv.style.cursor = "move";
}

window.onmousemove = function(e){//div随鼠标移动而移动的效果
	var event = e || window.event;
	
	if(!isDown){
		return;
	}
	
	var d_l = event.clientX - (x - l);
	var d_t = event.clientY - (y - t);//鼠标在div中位置点下后，拖拽过程中鼠标不再只是在div块的左上角。这里计算后返回了鼠标在div块的某个left、top。
	
	dv.style.left = d_l + 'px';
	dv.style.top = d_t + 'px';
}

dv.onmouseup = function(){//松开鼠标后的div不再移动
	isDown = false;
	dv.style.cursor = "fefault";
}

需要改进的地方
当拖拽超出了页面范围后，div不会全部展现出来。超出页面的内容就看不到了。