这篇文章主要为大家详细介绍了 js 实现小窗口拖拽效果, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/CSS">
- #box {
- height: 300px;
- width: 300px;
- background-color: green;
- position: absolute;
- }
- </style>
- </head>
- <body>
- <div id="box">
- </div>
- </body>
- <script type="text/javascript">
- var box = document.getElementById("box");
- //鼠标按下的函数
- box.onmousedown = function(ev) {
- var oEvent = ev || event;
- //求出鼠标和box的位置差值
- var x = oEvent.clientX - box.offsetLeft;
- var y = oEvent.clientY - box.offsetTop;
- //鼠标移动的函数
- //把事件加在document上,解决因为鼠标移动太快时,
- //鼠标超过box后就没有了拖拽的效果的问题
- document.onmousemove = function(ev) {
- var oEvent = ev || event;
- //保证拖拽框一直保持在浏览器窗口内部,不能被拖出的浏览器窗口的范围
- var l = oEvent.clientX - x;
- var t = oEvent.clientY - y;
- if(l < 0) {
- l = 0;
- } else if(l > document.documentElement.clientWidth - box.offsetWidth) {
- l = document.documentElement.clientWidth - box.offsetWidth;
- }
- if(t < 0) {
- t = 0;
- } else if(t > document.documentElement.clientHeight - box.offsetHeight) {
- t = document.documentElement.clientHeight - box.offsetHeight;
- }
- box.style.left = l + "px";
- box.style.top = t + "px";
- }
- //鼠标抬起的函数
- document.onmouseup = function() {
- document.onmousemove = null;
- document.onmouseup = null;
- }
- //火狐浏览器在拖拽空div时会出现bug
- //return false阻止默认事件,解决火狐的bug
- return false;
- }
- </script>
- </html>
来源: http://www.phperz.com/article/17/0523/329924.html