js拖拽特效

1、先写个样式

#div {
				width: 150px;
				height: 100px;
				background-color: skyblue;
				text-align: center;
				line-height: 50px;
				position: absolute;
				top: 3px;
}





<div id="div">
			拖拽特效
		</div>

2、js代码

/获取div
			var div = document.querySelector('div');
			//设置四个初始的全局变量
			var x, y, l, t;
			//默认拖拽状态为false
			var ade = false;
 
			//div的鼠标按下事件
			div.onmousedown = function(e) {
				//获取X，Y的坐标
				x = e.clientX;
				y = e.clientY;
 
				//获取div的左边距和上边距
				l = div.offsetLeft;
				t = div.offsetTop;
 
				//修改默认状态为true
				ade = true;
			}
 
			//div的鼠标移动事件
			div.onmousemove = function(e) {
				
				if (ade == false) {
					return;
				}
 
				//定义一个新的变量接受X,Y新的坐标
				var nx = e.clientX;
				var ny = e.clientY;
 
				//获取到新的边距的值
				var nl = nx - (x - l);
				var nt = ny - (y - t);
 
				//将新的边距的值作为div的左边距和上边距
				div.style.left = nl + 'px';
				div.style.top = nt + 'px';
			}
 
			//div的鼠标松开事件
			div.onmouseup = function(e) {
				ade = false;
    }