js层拖拽兼容IE、火狐 [最少代码][完美解决],该怎么处理

2012-05-05

js层拖拽兼容IE、火狐[最少代码][完美解决]一个简单的拖拽研究了快一周，恶心的我呦...好在终于整明白了，下

js层拖拽兼容IE、火狐 [最少代码][完美解决]
一个简单的拖拽研究了快一周，恶心的我呦...好在终于整明白了，下面和大家一起交流下。

拖拽原理：
鼠标按下时，记录当前鼠标和拖动层的坐标，并且拖动状态设为可拖动；
鼠标移动时，判断拖动状态，如果可拖动，那么根据当前的鼠标坐标以及鼠标按下时记录的初始坐标，计算出拖动层的位置，实行拖动；
鼠标弹起时，将拖动状态改为不可拖动。

遇到的问题：
1.移动较快时，拖拽失效；
2.火狐中，拖拽动作与浏览器的某些功能有冲突，导致动作不流畅或失效；

下面我一步步的把我的修改过程贴出来，大家一起交流啊~

[解决办法]
学习了。mark!!
[解决办法]
不错，拿着了研究下看看哈哈
[解决办法]
建议看下别人的代码，代码这东西，不是说写少了效率就高，写多了效率就低
[解决办法]
+0 应该是在做一个数据类型转化，即+完后就变成数字了
[解决办法]
谢谢LZ分享
[解决办法]
不错啊
[解决办法]
不错，感谢楼主，收藏了，建议【推荐】
[解决办法]
你必须要用到 setCapture 和releaseCapture

没用到这个的话，你如果拖动太快，该层会失去焦点
[解决办法]

探讨

一、最基本的拖动

能实现拖动，但是速度稍快点就会出问题。
另外：Y0=parseInt(moveObj.style.top+0);//？不清楚为什么一定要+0

HTML code

<html>
<head>
<style>
#move{cursor:move; position:absolute; width:100px; height:100px; b……

[解决办法]
个人觉得这里的+0是写错了的，常用的转换类型的手法应该是-0，如果是字符串后面+0只会把0追加到字符串后面，而-0则会将字符串转换为数字了

探讨

引用:

一、最基本的拖动

能实现拖动，但是速度稍快点就会出问题。
另外：Y0=parseInt(moveObj.style.top+0);//？不清楚为什么一定要+0

HTML code

<html>
<head>
<style>
#move{cursor:move; position:absolute; widt……

[解决办法]

学习一下
[解决办法]
学习了
[解决办法]
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> 
 
[解决办法]
学习了，楼主真好
[解决办法]
好东西，正在为这个纠结呢，谢谢分享啊……
[解决办法]
怎么让它 不拖拽出浏览器窗口啊？
[解决办法]
牛B坏了,多谢LZ.
[解决办法]

//注：添加了事件监听之后，IE里也可以像火狐里那样直接拿事件对象当函数的参数来用了，不必再window.event。
//但是不大清楚这是为什么，或者是说我还有什么地方理解错了，求交流。QQ：1140215489

求高手解答

[解决办法]
Y0=parseInt(moveObj.style.top+0);//？不清楚为什么一定要+0  

这个0不用加吧？

http://www.cnblogs.com/NNUF/archive/2012/04/02/2430132.html
[解决办法]
HTML code<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/jikeytang/yKeAk/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[解决办法]
现在jquery不是出了一个可以拖拽的控件么？一句代码就可以搞定，只要引用js代码就好了。

热点排行

JavaScript

js层拖拽 兼容IE、火狐 [最少代码][完美解决],该怎么处理

js层拖拽兼容IE、火狐 [最少代码][完美解决],该怎么处理