1 . 实现原理
要实现页面元素的拖动，其原理就是根据鼠标的移动实时的更改元素的left 和 top值（当然元素肯定是要做绝对定位的），那么就达到我们要的效果了呀！
鼠标的位置是可以通过 e.clientX 获取的，通过获取的值减去鼠标和目标元素之间的偏移量，就是我们的 left 值了呗,top值是同理的，不过记住要设置界限哟，不然跑出去了。
代码我尽量写了注释，如果还是有什么不懂的，直接评论就好了，我会尽快回复的。
2 . 实例展示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;}.move {height: 100px;width: 100px;background: #41ffce;position: absolute;top: 50px;left: 50px;}.move:hover{cursor: pointer;}</style></head><body><div class="move"></div><script>window.onload = function () {// 目标元素var move = document.getElementsByClassName("move")[0];// 鼠标按下move.onmousedown = function (e) {// 获取事件对象var e_down = e || window.event;// 计算鼠标点击的位置 和 目标元素之间 的偏移量var x = e_down.clientX - e_down.target.offsetLeft; var y = e_down.clientY - e_down.target.offsetTop;// 我们想要拖拽元素，其实就是根据鼠标的移动实时的更改元素的left 和 top值// 鼠标的位置是可以通过e.clientX 获取的，然后减去x 不就是我们的left值了//鼠标移动，肯定是在按住的情况下移动的嘛document.onmousemove = function(e){var e_move = e || window.event;left_ = e_move.clientX - x; top_ = e_move.clientY - y;// 对left_和top_添加界限if(left_ < 0){left_ = 0}else if(left_ > document.documentElement.clientWidth - e_down.target.offsetWidth){left_ = document.documentElement.clientWidth - e_down.target.offsetWidth}if(top_ < 0){top_ = 0}else if(top_ > document.documentElement.clientHeight - e_down.target.offsetHeight){top_ = document.documentElement.clientHeight - e_down.target.offsetHeight}// move.setAttribute("style","top:"+top_+'px'+";left:"+left_+"px")move.style.left = left_+'px';move.style.top = top_+'px';}// 释放鼠标move.onmouseup = function(){document.onmousemove = null}}}</script></body></html>
希望能够帮助到大家，有什么问题可以 直接评论即可，如果不够详细的话也可以说，我会及时回复的。
如果觉得《原生JS 实现页面元素的拖动 拖拽》对你有帮助，请点赞、收藏，并留下你的观点哦！
