下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
JS拖拽效果,得到鼠标事件,可拓展功能,改变元素的宽和高!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ margin-top: 10px; width: 200px; height: 150px; background: #dadada; position: absolute; cursor:move; } </style> </head> <body> <div id="div" ></div> <script> var drag=false; var x,y,movex,movey; var movediv =document.getElementById('div'); movediv.onmousedown=function(){ drag=false; x = window.event.clientX; /*当前鼠标坐标*/ y =window.event.clientY; movex = movediv.offsetLeft; /*当前元素坐标*/ movey =movediv.offsetTop } document.onmousemove=function(){ if(drag) return false; movediv.style.top= movey + window.event.clientY -y +'px'; movediv.style.left= movex + window.event.clientX -x +'px'; } document.onmouseup=function(){drag=true} </script> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。