js实现可拖拽的div
2015-06-11 18:21
639 查看
前言
下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现。 学习张鑫旭代码的同时又了解了几知识点。1、obj.currentStyle[attr] 和getComputedStyle(obj,false)[attr]。获取DOM非行间样式。 我百度了下currentStyle看到有的说Chrome和FF是不支持的,为了兼容,所以用到了这两个方法。
2、onselectstart。 IE和Chrome适用,防止内容被选中默认是true。
拖拽原理
1、可拖拽的div主要是确定mouseDown事件发生时的DOM承载对象,以及mouseMove时的坐标计算。2、其次是当拖拽完成时的DOM承载对象。多数会选择document,不知道我理解的对不对?
效果图
js
/** 拖拽div 关键事件:mouseDown, mouseMove,mouseUp **/ var params={ top:0, left:0, currentX:0, currentY:0, flag:false }; /** obj.currentStyle[attr] getComputedStyle(obj,false)[attr] 获取DOM非行间样式 **/ var getCss=function(o,key){ return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; } var startDrag=function(bar,target,callback){ if(getCss(target,'left')!='auto'){ params.left=getCss(target,'left'); } if(getCss(target,'top')!='auto'){ params.top=getCss(target,'top'); } bar.onmousedown=function(event){ params.flag=true; if(!event){ event=window.even; bar.onselectstart=function(){ //IE和Chrome适用,防止内容被选中默认是true return false; } } var e=event; params.currentX=e.clientX; params.currentY=e.clientY; } document.onmouseup=function(){ params.flag=false; if(getCss(target,"left") !='auto'){ params.left=getCss(target,'left'); } if(getCss(target,'top') !='auto'){ params.top=getCss(target,'top'); } } document.onmousemove=function(event){ var e=event?event:window.event; if(params.flag){ var nowX=e.clientX,nowY=e.clientY; var disX=nowX-params.currentX, disY=nowY-params.currentY; target.style.left=parseInt(params.left)+disX+'px'; target.style.top=parseInt(params.top)+disY+'px'; } if(callback=='function'){ callback(parseInt(params.left)+disX,parseInt(params.top)+disY); } } }
下载地址:http://yunpan.cn/cwTJmDQWtAgLs 访问密码 7d22
相关文章推荐
- Javascript中的this之我见
- JavaScript-数组详解
- 点修改密码后,用JS实现弹出框 在框里输入密码后点修改返回
- CryptoJS AES加密、解密练习demo
- <script type="text/javascript" src="<%=path %>/pages/js/arsis/area.js?v=1.01"></script> 为什么在最后加? v+1.01
- Gulp JS简单操作-待续
- 如何用JS弹出“有输入框并带有是、否、取消按钮”的对话框。
- 201506111312_《JavaScript权威指南——找元素位置函数、数组类型、数组对象》(p159-161)
- 非侵入式Javascript(MVC模型特性应用)
- json解析的几种方式
- 关于闭包
- js 的try catch应用
- 对js闭包的学习
- JS常用代码备忘
- 如何判断浏览器的类型?
- js 身份证号验证
- 手动触发js事件
- js获取url的参数的正则方式
- JavaScript语法中的九个陷阱
- 动画库tween.js--常用的运动算法