pc和移动端的js拖拽简易函数(不含html5原生拖拽)
2015-11-27 13:48
639 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title></title> <style> *{margin:0;padding:0;} </style> </head> <body> <div id="c" style="margin:100px;border:2px solid #f00;position:relative;width:800px;height:600px;"> <div id="a" style="border:1px solid #000; height:200px;width:300px;position:absolute;left:0;top:0;"> <p id="b" style="background:#ccc;height:20px;line-height:20px;">a</p> b </div> </div> <div style="height:1500px;"></div> <script> function zjfDrag(bar,target){ /* * zjfDrag(鼠标/手指操作处,作用目标) * zjfDrag(鼠标/手指操作处,作用目标,移动范围容器) * zjfDrag(鼠标/手指操作处,作用目标,回调函数) * zjfDrag(鼠标/手指操作处,作用目标,移动范围容器,回调函数) * */ bar=zjfDrag.tools.getEle(bar), target=zjfDrag.tools.getEle(target); var container, callback; if(arguments.length===3){ var arg3=arguments[2]; typeof arg3==='function'?(callback=arg3):(container=arg3); }else if(arguments.length===4) container=arguments[2], callback=arguments[3]; var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var _left=zjfDrag.tools.getCss(target, 'left'), _top=zjfDrag.tools.getCss(target, 'top'); _left !== 'auto' && (params.left = _left); _top !== 'auto' && (params.top = _top); var iftouch='ontouchstart' in document, events={ start:'mousedown', ing:'mousemove', end:'mouseup' }; iftouch && (events={ start:'touchstart', ing:'touchmove', end:'touchend' }); var _ll,_tt; if(container){ container=zjfDrag.tools.getEle(container), _ll=container.clientWidth-target.offsetWidth, _tt=container.clientHeight-target.offsetHeight; } var start=function(event){ params.flag = true; if(!event){ event = window.event; bar.onselectstart = function(){ return false; }; } event.preventDefault(); var e = iftouch? event.touches[0] : event; params.currentX = e.clientX; params.currentY = e.clientY; }, end=function(){ params.flag = false; var left=zjfDrag.tools.getCss(target, 'left'), top=zjfDrag.tools.getCss(target, 'top'); left !== 'auto' && (params.left = left); top !== 'auto' && (params.top = top); }, ing=function(event){ event= event||window.event; event.preventDefault(); var e = iftouch? event.touches[0] : event; if(params.flag){ var disX = e.clientX - params.current bbe5 X, disY = e.clientY - params.currentY; var nowLeft=parseInt(params.left) + disX, nowTop=parseInt(params.top) + disY; if(container){ nowLeft<0 && (nowLeft=0); nowTop<0 && (nowTop=0); nowLeft>_ll && (nowLeft=_ll); nowTop>_tt && (nowTop=_tt); } target.style.left = nowLeft + 'px'; target.style.top = nowTop+ 'px'; callback && callback(disX, disY, nowLeft, nowTop); } }, on=function(){ bar.addEventListener(events.start,start,false), document.addEventListener(events.ing,ing,false), document.addEventListener(events.end,end,false), bar.style.cursor='move', bar.style.MozUserSelect='none', bar.style.WebkitUserSelect='none', bar.style.OUserSelect='none', bar.style.userSelect='none'; return returnO; }, off=function(){ bar.removeEventListener(events.start,start,false), document.removeEventListener(events.ing,ing,false), document.removeEventListener(events.end,end,false), bar.style.cursor='', bar.style.MozUserSelect='', bar.style.WebkitUserSelect='', bar.style.OUserSelect='', bar.style.userSelect=''; return returnO; }, returnO= { on:on, off:off }; returnO.on(); return returnO; } zjfDrag.tools={ getCss:function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; }, getEle:function(arg){ return typeof arg==='string'?document.getElementById(arg):arg; } }; //zjfDrag('b','a'); zjfDrag(document.getElementById('b'),'a','c',function(disx,disy,left,top){ console.log(disx,disy,left,top); }); </script> </body> </html>
相关文章推荐
- iOS 基本的绘图
- android应用性能测试之CPU和内存占用
- Android toolbar添加SearchView混淆打包成功后访问出错
- 微信自定义推送模版消息
- 【原】objc_setAssociatedObject和objc_getAssociatedObject
- Android Studio修改常用快捷键
- AndroidManifest.xml文件配置整理集合
- sumline text 正则匹配
- Android RecyclerView的使用
- Android二维码讲解(ZXing)
- 深入理解Android(4)——理解Android中的JNI(下)
- 关于iOS Tabbar的一些设置
- Android--Dialog详细讲解
- Android 4.2 禁止下拉状态栏
- 【Android】SlidingMenu属性详解
- Android总结篇系列:Android广播机制
- Swift 的UIColor 类的详解使用和十六进制转RGB
- 深入理解Android(2)——理解Android中的JNI(中)
- Android Paint
- Android平台Camera实时滤镜实现方法探讨(四)--以Hefe滤镜为例