js层拖拽 兼容IE、火狐 [最少代码][完美解决],该怎么处理
日期：2014-05-16 浏览次数：20513 次
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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
