原生JS 实现页面元素的拖动拖拽

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 实现页面元素的拖动拖拽相关推荐

draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...
前言关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
原生js——无法获取元素高度的的问题
原生js--无法获取元素高度的的问题今天遇到了xxx.style.width无法获取元素宽度的问题,原来一直没有注意到这个小细节: 1)如果width:150px:是写在 css 样式表(外链式)里 ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
原生js firstChild 获取元素的第一个节点兼容问题（需求获取元素节点）
原生js firstChild 获取元素的第一个节点问题 firstChild 获取当前元素节点下的第一个子节点. 获取到的子节点可能是元素节点,但编程中更可能是注释节点或文本节点. 没有子节点则返回 ...
【JS案例】：实现盒子拖拽功能
JS小案例:实现盒子拖拽功能 HTML部分: <div id="box"></div> CSS部分: #box{width: 100px;height: 1 ...
nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
highchart的draggable-points.js依赖实现图表的动态拖拽操作
highchart的draggable-points.js依赖实现图表的动态拖拽操作需求实现总结需求实现一个曲线图,能够通过鼠标去拖拽点,来进行修改图表实现例子基于vue来实现,如果是j ...
移动html触摸效果,JS实现移动端触屏拖拽功能
2.css 3.js = maxW) { oLeft = maxW; } if(oTop < 0) { oTop = 0; } else if(oTop >= maxH) { oTop = ...

原生JS 实现页面元素的拖动拖拽

1 . 实现原理

2 . 实例展示

原生JS 实现页面元素的拖动拖拽相关推荐

最新文章

热门文章

原生JS 实现页面元素的拖动 拖拽

1 . 实现原理

2 . 实例展示

原生JS 实现页面元素的拖动 拖拽相关推荐

最新文章

热门文章

原生JS 实现页面元素的拖动拖拽

原生JS 实现页面元素的拖动拖拽相关推荐