拖拽的实现是通过给元素设置 position 为相对定位，而后在鼠标按下的时候记录下地位，而后监测文档内鼠标的挪动情况，来更改元素款式的 left 和 top值来实现了拖动的成果。大佬博客指路。代码如下：
<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖拽</title></head><style> .container{ width: 100%; position: relative; height: 100%; } #drag{ width: 50px; height: 50px; background-color: red; position: absolute; cursor: move; }</style><body> <div class="container"> <div id="drag"></div> </div> <script> let drag = document.querySelector('#drag') drag.onmousedown = function(event){ //获取到事件对象 //从中能够获取到鼠标所在的地位，计算出dom元素的地位 console.log(event); var diffX = event.clientX - drag.offsetLeft; var diffY = event.clientY - drag.offsetTop; if(typeof drag.setCapture !== 'undefined'){ drag.setCapture(); } document.onmousemove = function(event){ var event = event || window.event; var moveX = event.clientX - diffX; var moveY = event.clientY - diffY; if(moveX < 0){ moveX = 0 }else if(moveX > window.innerWidth - drag.offsetWidth){ moveX = window.innerWidth - drag.offsetWidth } if(moveY < 0){ moveY = 0 }else if(moveY > window.innerHeight - drag.offsetHeight){ moveY = window.innerHeight - drag.offsetHeight } drag.style.left = moveX + 'px'; drag.style.top = moveY + 'px' } document.onmouseup = function(event){ this.onmousemove = null; this.onmouseup = null; //修复低版本ie bug if(typeof drag.releaseCapture!='undefined'){ drag.releaseCapture(); } } } </script></body></html>另外博客还介绍了一种 H5 的拖拽，通过给元素设置属性 draggable="true" 来容许元素拖拽，而后监听元素的拖拽事件，来实现。