简单的鼠标拖动效果
Posted 骑猪敲代码
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的鼠标拖动效果相关的知识,希望对你有一定的参考价值。
使用js实现简单的鼠标拖动效果,但此部分代码有个小小的BUG,后期改进好我会写进来,但基本的效果已经实现,请大家参考。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移动</title> <style> #box{ width: 50px; height: 50px; position: relative; background-color: green; top: 50px; left: 50px; cursor: move; } </style> </head> <body> <div id="box"></div> <script> var box=document.getElementById(‘box‘); var x=0,y=0,boxx=0,boxy=0,ex=0,ey=0,isDown=true; box.onmousedown=function(ev){ var e=ev||window.event; ex=e.clientX-box.offsetLeft; ey=e.clientY-box.offsetTop; box.onmousemove=function(ev){ var e=ev||window.event; x=e.clientX-ex; y=e.clientY-ey; box.style.left=x+‘px‘; box.style.top=y+‘px‘; console.log(x); console.log(y); } } box.onmouseup=function(){ box.onmousemove=‘null‘; } </script> </body> </html>
以上是关于简单的鼠标拖动效果的主要内容,如果未能解决你的问题,请参考以下文章