js层拖拽 兼容IE、火狐 [最少代码][完美解决]

youryida 2011-09-20 10:55:07
一个简单的拖拽研究了快一周，恶心的我呦...好在终于整明白了，下面和大家一起交流下。

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

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

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

...全文
1234 30 打赏 收藏 转发到动态 举报
写回复
用AI写文章
30 条回复
切换为时间正序
请发表友善的回复…
发表回复
tecs27 2013-11-04
  • 打赏
  • 举报
 回复
楼主是个牛人
yngchen 2012-08-21
  • 打赏
  • 举报
 回复
好帖，需要支持。希望LZ提供更强大的功能
sinbasara 2012-04-17
  • 打赏
  • 举报
 回复

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

求高手解答
豪情 2012-04-17
  • 打赏
  • 举报
 回复 


<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/jikeytang/yKeAk/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
aihua17 2012-04-17
  • 打赏
  • 举报
 回复 
Y0=parseInt(moveObj.style.top+0);//？不清楚为什么一定要+0

这里面的0可以不用添加的吧，获取的TOP值本生就是带单位的字符串，加个0没用吧
http://www.cnblogs.com/NNUF/archive/2012/04/02/2430132.html
aihua17 2012-04-17
  • 打赏
  • 举报
 回复
Y0=parseInt(moveObj.style.top+0);//？不清楚为什么一定要+0

这个0不用加吧？

http://www.cnblogs.com/NNUF/archive/2012/04/02/2430132.html
想念旧时光 2012-04-17
  • 打赏
  • 举报
 回复
现在jquery不是出了一个可以拖拽的控件么？一句代码就可以搞定，只要引用js代码就好了。
ckstory 2012-04-16
  • 打赏
  • 举报
 回复
牛B坏了,多谢LZ.
lovemekaikai 2012-04-11
  • 打赏
  • 举报
 回复
怎么让它 不拖拽出浏览器窗口啊？
qinglinglaoren 2011-11-14
  • 打赏
  • 举报
 回复
好东西，正在为这个纠结呢，谢谢分享啊……
ghost123cc 2011-10-22
  • 打赏
  • 举报
 回复
学习了，楼主真好
plzzz 2011-10-22
  • 打赏
  • 举报
 回复
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.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>
kwdpx 2011-10-22
  • 打赏
  • 举报
 回复
学习了
wwwhhb4006 2011-10-22
  • 打赏
  • 举报
 回复

学习一下
youryida 2011-10-21
  • 打赏
  • 举报
 回复
五、获取当前渲染样式值

上一次发的代码里还有不正确的地方：
X0=parseInt(dragObj.style.left+0);
Y0=parseInt(dragObj.style.top+0);
--如果初始没有设置div的top值，浏览器dragObj.style.left是个空字符串，+0是为了让X0初始为0；如果拖动块不在左上角就不能这么写了，得先设置上top，left值，因为Obj.style.left只能获取行内样式，所以得换一种方法来获取当前的样式值。


//获取当前渲染样式
function getNowStyle(element,styleName){
var nowValue=parseInt(ie?element.currentStyle[styleName]:window.getComputedStyle(element,null)[styleName]);
return nowValue;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>

.move{

	cursor:move;

	position:absolute;

	top:10px;/*必须要设置,不然在IE里获取的.top为auto，无法进行算术运算*/

	left:400px;

	width:100px;

	height:100px;

	background:green;

	-moz-user-select:none;/*火狐禁止选中*/

}

.food{background:blue;width:100px;height:100px;}

</style>

<script language="javascript">

var X0,Y0,eX0,eY0;

var dragAble=false;

var dragObj;	

var ie = (document.all) ? true : false;//是否为IE



//开始拖拽

function dragStart(e){

	var oDragHandle;

	if(ie){

		oDragHandle = e.srcElement;

	}else{

		oDragHandle = e.target;

	}	

	if(oDragHandle.className=='move'){

		dragObj=oDragHandle;

		eX0= e.clientX;

		eY0= e.clientY;

		X0=getNowStyle(dragObj,"left");//获取当前样式值

		Y0=getNowStyle(dragObj,"top");

		show(X0,Y0);			

		dragAble=true;

	}

}

//拖拽

function drag(e){

	if(dragAble){

		var eX1= e.clientX;

		var eY1= e.clientY;

		dragObj.style.left=X0+eX1-eX0+"px";

		dragObj.style.top=Y0+eY1-eY0+"px";

	}

}

//停止拖拽

function dragEnd(){

	dragAble=false;

}

//事件监听浏览器兼容

function addListener(element,eName,fn){

    if(ie){// ie 	

		element.attachEvent("on"+eName,fn);

    }else {// firefox  , w3c

		element.addEventListener(eName,fn,false);

    }	

}

//添加事件监听

window.onload = function(){

	addListener(document,"mousedown",dragStart);//鼠标按下开始拖拽

	addListener(document,"mousemove",drag);//拖拽

	addListener(document,"mouseup",dragEnd);//弹起停止拖拽	

}

//当前渲染样式

function getNowStyle(element,styleName){

	var nowValue=parseInt(ie?element.currentStyle[styleName]:window.getComputedStyle(element,null)[styleName]);

	return nowValue;

}



</script>

</head>

<body>

<div class="move"><!--<br/>如果样式规定里此div可选，并且没有内容的话，火狐会有bug--></div>

<div class="food"></div>

</body>

</html>

youryida 2011-09-30
  • 打赏
  • 举报
 回复
四、添加事件监听


这两天找到了一个更正规的事件处理方式，就是IE:attachEvent(),w3c:addEventListener()
例：window.attachEvent ? obj.attachEvent("onmousedown", Foo): obj.addEventListener("mousedown", Foo, false);

添加了事件监听之后，我很吃惊的发现在IE里也可以像火狐那样支持“以传参数的形式获取事件对象了”，信不信大家可以自己试一下，下面是代码。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style>

.move{cursor:move;	position:absolute;	width:100px;	height:100px;	background:green;-moz-user-select:none;/*火狐禁止选中*/}

</style>

<script language="javascript">

var X0,Y0,eX0,eY0;

var dragAble=false;

var dragObj;

var ie = (document.all) ? true : false;//是否为IE



function dragStart(e){//现在参数e在IE里也是是直接可以供函数使用的，比如第16行。

	var oDragHandle;

	if(ie){

		oDragHandle = e.srcElement;

	}else{

		oDragHandle = e.target;

	}	

	if(oDragHandle.className=='move') 

	{

		dragObj=oDragHandle;

		eX0= e.clientX;

		eY0= e.clientY;

		X0=parseInt(dragObj.style.left+0);	

		Y0=parseInt(dragObj.style.top+0);

		dragAble=true;

	}

}

//拖拽

function drag(e){

	if(dragAble)

	{

		var eX1= e.clientX;

		var eY1= e.clientY;			

		dragObj.style.left=X0+eX1-eX0+"px";

		dragObj.style.top=Y0+eY1-eY0+"px";

	}

}

//停止拖拽

function dragEnd(){

	dragAble=false;

}

//事件监听浏览器兼容

function addListener(element,eName,fn){

    if(ie){// ie 	

		element.attachEvent("on"+eName,fn);

    }else {// firefox  , w3c

		element.addEventListener(eName,fn,false);

    }	

}



//添加事件监听

window.onload = function(){

	addListener(document,"mousedown",dragStart);//鼠标按下开始拖拽

	addListener(document,"mousemove",drag);//拖拽

	addListener(document,"mouseup",dragEnd);//弹起停止拖拽	

}

//注：添加了事件监听之后，IE里也可以像火狐里那样直接拿事件对象当函数的参数来用了，不必再window.event。

//但是不大清楚这是为什么，或者是说我还有什么地方理解错了，求交流。QQ：1140215489

</script>

</head>



<body>

<div class="move"><!--<br/>如果样式规定里此div可选，并且没有内容的话，火狐会有bug--></div>

<div class="move" style="background:blue;left:200px"></div>

</body>

</html>

晓敬 2011-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 doitslowly 的回复:]

一、最基本的拖动

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

HTML code

<html>
<head>
<style>
#move{cursor:move; position:absolute; width:100px; height:100px; b……
[/Quote]
+0应该如楼上所说是转换为数字类型，你可以使用函数parseint、pasefloat或Numeric来解决这个问题，但是不知道效率那个更高点，楼主如果感兴趣可以查查哟
「已注销」 2011-09-21
  • 打赏
  • 举报
 回复
个人觉得这里的+0是写错了的，常用的转换类型的手法应该是-0，如果是字符串后面+0只会把0追加到字符串后面，而-0则会将字符串转换为数字了

[Quote=引用 13 楼 jingyexiaoyue 的回复:]

引用 1 楼 doitslowly 的回复:

一、最基本的拖动

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

HTML code

<html>
<head>
<style>
#move{cursor:move; position:absolute; widt……
[/Quote]
xuexiaodong2009 2011-09-20
  • 打赏
  • 举报
 回复
不错啊
youryida 2011-09-20
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 wldlzt 的回复:]

建议看下别人的代码，代码这东西，不是说写少了效率就高，写多了效率就低
[/Quote]
嗯，同意，我就是自己没写出来，百度的别人的，然后整合了一下。
短一点的话效率我不大清楚，不过对初学者来说肯定是容易理解点儿。
然后那个拖拽的实现方式上。我觉得思路应该只有这个思路了。

还有那个+0，我觉得很别扭，明明parseInt(）已经转成整形了，为什么要在里面写个+0呢？
加载更多回复（10）
【guiplan2.0教程】可视化布局一键生成web前端代码
全程都是可视化教学，自动生成代码。生成之后的代码符合w3c规范，除了学会软件的使用以外，我们还能学到前端html结构搭建，拖拽调整html结构，css常用样式可视化的配置，以及交互功能vue可视化配置，简单的代码编写...
最少代码的可拖动DIV
以前在网上看到的最简单的拖动对象的代码，忘记作者叫什么了。原始代码在IE下有些小问题，并且声明了文档类型为xhtml 1.0后，在FF等非IE浏览器下无效，对其... 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、...
关于HTML/CSS/JS常见兼容性整理
7、IE 6、Firefox等）访问同一个页面时，可能会出现不一致的情况，出现这种现象的原因有很多种，但根本原因就是浏览器对于技术支持的标准不同造成的。 IE浏览器对于标准技术的支持是很不完善的，这些问题可以...
浏览器兼容性(手机、电脑。js、html、css)
浏览器兼容性 13  标准网页布局的兼容性处理 标准网页设计的最大挑战不在于技术本身，而在于... 7、IE 6、Firefox等）访问同一个页面时，可能会出现不一致的情况，出现这种现象的原因有很多种，但根...
经典js面试题
js： cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性...IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。 cookie的最大大约为4096字节，为了兼容性，...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章