js层拖拽 兼容IE、火狐 [最少代码][完美解决],该怎么处理
js层拖拽 兼容IE、火狐 [最少代码][完美解决]
一个简单的拖拽研究了快一周,恶心的我呦...好在终于整明白了,下面和大家一起交流下。
拖拽原理:
鼠标按下时,记录当前鼠标和拖动层的坐标,并且拖动状态设为可拖动;
鼠标移动时,判断拖动状态,如果可拖动,那么根据当前的鼠标坐标以及鼠标按下时记录的初始坐标,计算出拖动层的位置,实行拖动;
鼠标弹起时,将拖动状态改为不可拖动。
遇到的问题:
1.移动较快时,拖拽失效;
2.火狐中,拖拽动作与浏览器的某些功能有冲突,导致动作不流畅或失效;
下面我一步步的把我的修改过程贴出来,大家一起交流啊~
------解决方案--------------------
学习了。mark!!
------解决方案--------------------
不错,拿着了 研究下看看 哈哈
------解决方案--------------------
建议看下别人的代码,代码这东西,不是说写少了效率就高,写多了效率就低
------解决方案--------------------
+0 应该是在做一个数据类型转化,即+完后就变成数字了
------解决方案--------------------
谢谢LZ分享
------解决方案--------------------
不错啊
------解决方案--------------------
不错,感谢楼主,收藏了,建议【推荐】
------解决方案--------------------
你必须要用到 setCapture 和releaseCapture
没用到这个的话,你如果拖动太快,该层会失去焦点
------解决方案--------------------
------解决方案--------------------
个人觉得这里的+0是写错了的,常用的转换类型的手法应该是-0,如果是字符串后面+0只会把0追加到字符串后面,而-0则会将字符串转换为数字了
------解决方案--------------------
学习一下
------解决方案--------------------
学习了
------解决方案--------------------
1.从event.screenX or screenY 取值是最快的.
2.可以添加一个卡喉函数来降低CPU损耗..
---仅供参考---
一个简单的拖拽研究了快一周,恶心的我呦...好在终于整明白了,下面和大家一起交流下。
拖拽原理:
鼠标按下时,记录当前鼠标和拖动层的坐标,并且拖动状态设为可拖动;
鼠标移动时,判断拖动状态,如果可拖动,那么根据当前的鼠标坐标以及鼠标按下时记录的初始坐标,计算出拖动层的位置,实行拖动;
鼠标弹起时,将拖动状态改为不可拖动。
遇到的问题:
1.移动较快时,拖拽失效;
2.火狐中,拖拽动作与浏览器的某些功能有冲突,导致动作不流畅或失效;
下面我一步步的把我的修改过程贴出来,大家一起交流啊~
------解决方案--------------------
学习了。mark!!
------解决方案--------------------
不错,拿着了 研究下看看 哈哈
------解决方案--------------------
建议看下别人的代码,代码这东西,不是说写少了效率就高,写多了效率就低
------解决方案--------------------
+0 应该是在做一个数据类型转化,即+完后就变成数字了
------解决方案--------------------
谢谢LZ分享
------解决方案--------------------
不错啊
------解决方案--------------------
不错,感谢楼主,收藏了,建议【推荐】
------解决方案--------------------
你必须要用到 setCapture 和releaseCapture
没用到这个的话,你如果拖动太快,该层会失去焦点
------解决方案--------------------
------解决方案--------------------
个人觉得这里的+0是写错了的,常用的转换类型的手法应该是-0,如果是字符串后面+0只会把0追加到字符串后面,而-0则会将字符串转换为数字了
------解决方案--------------------
学习一下
------解决方案--------------------
学习了
------解决方案--------------------
1.从event.screenX or screenY 取值是最快的.
2.可以添加一个卡喉函数来降低CPU损耗..
---仅供参考---
- HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></HEAD> <BODY style="height:800px;"> <div id="testDiv" style="width:200px; height:200px; background:#f00; position:absolute; cursor:move"></div> <script type="text/javascript"> var start = (function(){ var i, // count o, // HTML DOM x,y; function moving(e) { if(i++^6)//like if(!(i++===6)) return; o.style.left=(e.screenX-x)+'px'; o.style.top=(e.screenY-y)+'px'; i=0; } function end(e) { if(window.addEventListener){ window.document.removeEventListener('mousemove',moving,false); document.removeEventListener('mouseup',arguments.callee,false); }else{ window.document.detachEvent('onmousemove',moving); window.document.detachEvent('onmouseup',arguments.callee); } window.document.body.focus() // ff 3.0 } return function(e,d) { i = 0; x = e.screenX-d.offsetLeft; y = e.screenY-d.offsetTop; o = d; if(window.addEventListener){ window.document.addEventListener('mousemove',moving,false) window.document.addEventListener('mouseup',end,false) }else{ window.document.attachEvent('onmousemove',moving) window.document.attachEvent('onmouseup',end) } } })(); document.getElementById('testDiv').onmousedown=function(e){ e=e || event; start(e,this); e.cancelBubble=true; return false; } </script> </BODY> </HTML>