js怎么实现模拟鼠标拖拽事件的呢?
导读:今天这篇给大家分享的知识是“js怎么实现模拟鼠标拖拽事件的呢?”,小编觉得挺不错的,对大家学习或是工作可能会有所帮助,对此分享发大家做个参考,希望这篇“js怎么实现模拟鼠标拖拽事件的呢?”文章能帮助大家解决问题。...
今天这篇给大家分享的知识是“js怎么实现模拟鼠标拖拽事件的呢?”,小编觉得挺不错的,对大家学习或是工作可能会有所帮助,对此分享发大家做个参考,希望这篇“js怎么实现模拟鼠标拖拽事件的呢?”文章能帮助大家解决问题。这次的效果图如下:
我认为这个实验的难点是保持盒子和鼠标的相对位置不变,通过鼠标按下和移动来实现拖拽的效果
如何实现拖拽的效果呢?
我们需要用到三个函数: onmousedown
、onmousemove
、onmouseup
,分别表示鼠标按下、鼠标移动、鼠标抬起
在鼠标按下的回调函数中,我们需要通过clientX
和clientY
获取鼠标的初始位置,通过offsetLeft
和offsetTop
获取盒子的初始位置,然后计算鼠标初始位置和盒子初始位置的差值;
在鼠标移动的回调函数中,我们需要根据鼠标的位置和之前计算得到的差值来获取盒子现在的位置,然后改变其left和top值,不要忘记将position设置为absolute(因为我就忘记了。。。)
在鼠标抬起的回调函数中,我们需要清除鼠标移动和鼠标抬起,通过将onmousemove
和onmouseup
值设置为null即可
还要注意!!!
鼠标移动函数和抬起函数均要写在鼠标按下函数中,因为我们是要在鼠标按下这个动作之后来设计之后的行为,而且很重要的一点是:
鼠标按下函数是p的,鼠标移动和鼠标抬起是document的
因为我们的意思并不是鼠标在p中移动,而是在整个页面移动
重点大概是这些了,下面是代码:
!DOCTYPE html> html> 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> Document/title> style> #box{ width: 100px; height: 100px; background-color: aquamarine; border-radius: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.3); /* 好家伙 都没设置定位 就想移动 改变left。。。 */ position: absolute; } /style> /head> body> div id="box"> /div> script> let box=document.getElementById("box"); box.onmousedown=function(event){ let disx=event.clientX-box.offsetLeft; let disy=event.clientY-box.offsetTop; //此处不是box.onmousemove,是document.onmousemove document.onmousemove=function(event){ box.style.left=event.clientX-disx+'px'; box.style.top=event.clientY-disy+'px'; } //要写在ommousedown里面 document.onmouseup=function(){ //这俩都要置为null document.onmousemove=null; document.onmouseup=null; return false; } } /script> /body> /html>
以上就是关于“js怎么实现模拟鼠标拖拽事件的呢?”的介绍了,感谢各位的阅读,希望文本对大家有所帮助。如果想要了解更多知识,欢迎关注网络,小编每天都会为大家更新不同的知识。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: js怎么实现模拟鼠标拖拽事件的呢?
本文地址: https://pptw.com/jishu/653410.html