日期:2014-05-16  浏览次数:20384 次

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应该如楼上所说是转换为数字类型,你可以使用函数parseint、pasefloat或Numeric来解决这个问题,但是不知道效率那个更高点,楼主如果感兴趣可以查查哟
------解决方案--------------------
个人觉得这里的+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损耗..


---仅供参考---

<!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.