js实现鼠标拖拽效果

初步

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;user-select: none;}#box{width: 200px;height: 200px;background-color: orangered;position: absolute;}h3{height: 30px;line-height: 30px;text-align: center;color: #fff;background-color: coral;}</style>
</head>
<body><div id="box"><h3 id="title">蜘蛛侠</h3></div><script>let box=document.getElementById('box');let title=document.getElementById('title');//利用js实现盒子上下左右居中let left=(document.documentElement.clientWidth-box.offsetWidth)/2;let topp=(document.documentElement.clientHeight-box.offsetHeight)/2;box.style.left=left+'px';box.style.top=topp+'px';//实现拖拽的逻辑//当用户按下鼠标的时候开始给当前title绑定鼠标移动事件，当用户抬起鼠标的时候，移除title的移动事件title.onmousedown=function(e){// 记录一下鼠标按下时的盒子的初始left值和鼠标的e.clientXthis.oldClientX=e.clientX;//记录初始的鼠标的clientX值this.oldClientY=e.clientY;//记录初始的鼠标的clientY值this.oldLeft=parseFloat(box.style.left);//记录初始的盒子的left值this.oldTop=parseFloat(box.style.top);//记录初始的盒子的top值this.onmousemove=move;//给title绑定鼠标移动事件}function move(e){//获取当前鼠标的最新的clientX/Y，然后减去初始的clientX/Y，这就是光标移动的距离，也是盒子需要移动的距离//盒子最新的位置等于盒子主要移动的距离加上初始的距离let curLeft=e.clientX-this.oldClientX + this.oldLeft+'px';let curTop=e.clientY-this.oldClientY + this.oldTop+'px';box.style.left=curLeft;box.style.top=curTop;}title.onmouseup=function(){title.onmousemove=null;}</script>
</body>
</html>

优化

上面的实现方式有缺陷：盒子每移动一次就需要dom回流重绘一次，消耗性能，这时候如果鼠标移动的太快，那浏览器计算盒子的位置的速度就跟不上鼠标移动的速度，所以鼠标就跑出了盒子之外，这时候在盒子外边抬起鼠标，并没有触发title的onmouseup事件，这时候title的onmousemove事件并没有被移除，所以鼠标再次进入的时候还是有鼠标移动事件。

     let box=document.getElementById('box');let title=document.getElementById('title');let left=(document.documentElement.clientWidth-box.offsetWidth)/2;let topp=(document.documentElement.clientHeight-box.offsetHeight)/2;box.style.left=left+'px';box.style.top=topp+'px';title.onmousedown=function(e){this.oldClientX=e.clientX;this.oldClientY=e.clientY;this.oldLeft=parseFloat(box.style.left);this.oldTop=parseFloat(box.style.top);//把当前的onmousemove绑定给document，这样不管你在哪里移动，通过冒泡机制都会触发document的onmousemove事件document.onmousemove=move.bind(this);// document.οnmοusemοve=function(e){//     //this-->document//     move.call(title,e);//不是window执行的，需要获取事件对象e// }}function move(e){let curLeft=e.clientX-this.oldClientX + this.oldLeft+'px';let curTop=e.clientY-this.oldClientY + this.oldTop+'px';box.style.left=curLeft;box.style.top=curTop;}//通过冒泡机制，不管在哪里执行鼠标抬起都会触发document的onmouseup事件document.onmouseup=function(){document.onmousemove=null;}

js实现鼠标拖拽效果相关推荐

【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
JavaScript实现鼠标拖拽效果
JavaScript实现鼠标拖拽效果前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果.效果如图: HTML代码: <div id=" ...
html 复选框拖拽多选,js实现鼠标拖拽多选功能
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. 鼠标拖拽多选功能 ...
html div 可鼠标滚动,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
用JS实现版面拖拽效果
类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件通过获取鼠标的坐标(clientX,clientY)来改变面板的位置注意:面板使用绝对定位方式,是以左上角为参考点, ...
用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...

js实现鼠标拖拽效果

初步

优化

js实现鼠标拖拽效果相关推荐

最新文章

热门文章