js鼠标托拽移动div

首先先写好基础的样式HTML和css样式

<div id="div">
			来一段文字<br>拖着看看
		</div>

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

然后是在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;
			}

上下左右均可托拽移动