Javascript鼠标拖动面板的制作【思路及注意点】
来源:互联网 发布:昆明行知中学校花 编辑:程序博客网 时间:2024/06/05 20:36
先来看看效果:拖动面板演示效果
HTML结构很简单,一个大的div包含三个小的div 如图:
然后开始思考如何来写鼠标拖动实现的代码。
- 点击到标题才能拖动.
- 标题被点击后,触发点击事件,同时给点击事件绑定鼠标移动事件。
- 当鼠标移动时,将面板也按照鼠标的位置进行移动。
- 鼠标松开后,清空鼠标移动事件。
这是大方向的思路,然后我们细化一下。
- 标题被点击,首先要获取到class=”text”的第一个元素,设置onclick事件。
- 绑定的鼠标移动事件中,首先得到鼠标的位置,然后得到面板的位置,需要进行一点运算看看让面板怎样移动,这个后面会详解。
- 对于最后清空鼠标移动事件:标题鼠标松开时触发onmouseup事件,此时将页面的onmousemove设置为null就清空了。
4.由于getelementsByClassName在低于IE10的版本下不支持,所以我们需要封装一个用className获取元素的方法。
OK,思路有了,开始写代码。
首先封装用className获取元素的方法,因为我们后面会用到,具体写法如下。
function getByClass('className','parent'){ var oParent=parent? document.getElementById(parent):document, eles=[], elements=oParent.getElementsByTagName('*'); for (var i = 0; i < elements.length; i++) { if (elements[i].className==className){ eles.push(elements[i]); } } return eles;}
这个方法传入两个参数className和parent,其中parent如果没有传入的话,就是body,这个方法最后返回一个数组。
然后
`window.onload=drag();`
开始编写drag()函数
function drag() {var oTitle = getByClass('text','things')[0];oTitle.onmousedown = fnDown;oTitle.onmouseup = function(){ document.onmousemove = null; }
}
首先获取到标题,也就是text的第一个元素,然后给标题绑定方法fnDown,在fnDown中我们会写鼠标移动时该怎么做,然后设置当鼠标松开时清空文档的鼠标移动事件。
鼠标按下时我们要做什么?获取鼠标的位置,面板的位置,然后确定如何移动面板。
鼠标的位置是 (event.clientX,event.clientY) 要获取面板的位置,我们先找到面板 var oDrag = document.getElementById('things');
面板的位置就是 (oDrag.offsetLeft,oDrag.offsetTop) 然后我们需要计算,鼠标移动时,面板的位置应该是什么。
用一张图来说一下:
可以看到,我们需要储存一下鼠标点击时与面板之间的位置关系,可以用event.clientX-oDrag.offsetLeft
表示水平偏移量disX,用event.clientY-oDrag.offsetTop
来表示垂直偏移量disY。
储存了偏移量之后,就很好做了,直接先将面板的位置设置为与鼠标相同,此时鼠标在面板的左上角,然后再根据偏移量将面板向左移disX,向下移disY就好了。
但是还要考虑到一点,移动的时候是不能移动到边框外的,比如这样:
想一下,假如向左向上移动出框了,那么event.clientX-oDrag.offsetLeft
一定是负数,对于Top和clientY也是一样,所以我们要让xiaoyu0的时候都等于0 就是贴在了边框上。
然后向下,向右,只要最大不超过浏览器宽度即可。用clientWidth和clientHeight获取浏览器宽度,然后大于最大时,等于最大。
鼠标移动代码最终如下:
function fnDown() { var oDrag = document.getElementById('things'), disX = event.clientX-oDrag.offsetLeft, disY = event.clientY-oDrag.offsetTop; document.onmousemove=function(event) { event = event||window.event; move(event,disX,disY); }}function move(event,disX,disY) { var oDrag = document.getElementById('things'), l = event.clientX-disX, t = event.clientY-disY, winWidth = document.documentElement.clientWidth || document.body.clientWidth, winHeight = document.documentElement.clientHeight || document.body.clientHeight, maxW= winWidth-oDrag.offsetWidth, maxH = winHeight-oDrag.offsetHeight; if (l<0) { l = 0; }else if(l>maxW){ l = maxW; } if (t<0) { t = 0; }else if (t>maxH) { t = maxH; } oDrag.style.left = l+'px'; oDrag.style.top = t+'px';}
其中对获取浏览器宽度和高度做了一下浏览器兼容处理,最后改变位置就设置oDrag.style.left和top属性。
OK,完成。
最终代码托管在coding上供网友参考:
https://coding.net/u/i_imT/p/TF_/git/blob/master/demo-drag.html
掏粪原创,转载请注明出处。 新浪微博ID:我叫掏粪i
- Javascript鼠标拖动面板的制作【思路及注意点】
- 鼠标拖动面板
- java-支持鼠标拖动面板
- Javascript获取鼠标位置及拖动函数
- VC制作可鼠标拖动及改变大小的矩形:CRectTracker“橡皮筋类”的应用
- Javascript实现div的鼠标拖动
- 最精简的JavaScript鼠标拖动代码
- 最精简的JavaScript鼠标拖动代码
- 鼠标拖动JavaScript
- 鼠标拖动图片-javascript
- JavaScript鼠标拖动
- javascript鼠标拖动层跟不上鼠标的速度解决方案
- 写javascript的注意点
- 点下鼠标左键的同时拖动鼠标获取鼠标的位置信息
- 制作Firefox Plugin的几个注意点
- javascript 鼠标拖动层。限制拖动范围
- css+javascript制作下拉面板
- JavaScript实现鼠标拖动方块
- network in network
- CRTMPServer 在CentOS 64-bit下的编译
- 常用正则表达式(二)
- javascript关键字和保留字
- js实现页面跳转重定向的几种方式
- Javascript鼠标拖动面板的制作【思路及注意点】
- Spark doBulkLoad数据进入hbase
- Android 浅尝Tinker微信热修复
- centos7 为服务器设置静态内网IP
- Dapper 基本使用
- c++ 各种求min/max方法效率测试
- 第二本第六章上机3制作聚美优品美容热点产品列表
- GObject 学习笔记汇总---2
- PHP 开发APP 接口