【求助】请求讲解div拖曳源代码

頑笑 2009-02-04 04:42:40

附件这段代码(由于代码太多，所以放在附件里面了)是做div拖曳效果的，可是写得好复杂，实在看不懂啊。
哪位高手能不能抽点时间，给我解释解释啊，万分感谢。

...全文

129 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

Yuhao818 2009-02-05

打赏
举报



//调用方法Move_obj(id);

var isIE = document.all ? true : false;

var drag_=false

var D=new Function('obj','return document.getElementById(obj);')

var oevent=new Function('e','if (!e) e = window.event;return e')

function Move_obj(obj){

	var x,y;

	obj = D(obj);

	//var pobj = obj.parentNode;如果想在子Div移动父Div就用这个方法

        var pobj = obj;

	obj.onmousedown=function(e){

		drag_=true;

		if(isIE){

			pobj.setCapture();		

			pobj.style.filter= "Alpha(Opacity=70)";	

		}else{

			window.captureEvents(Event.mousemove);

			pobj.style.opacity = 0.5;

		}

		with(pobj){

			style.position="absolute";

			var temp1=offsetLeft;

			var temp2=offsetTop;

			x=oevent(e).clientX;

			y=oevent(e).clientY;

			document.onmousemove=function(e){

				if(!drag_)

					return false;

				with(pobj){

					style.left=temp1+oevent(e).clientX-x+"px";

					style.top=temp2+oevent(e).clientY-y+"px";

				}

			}

		}

		

		document.onmouseup = function(){

			drag_=false

			if(isIE){

				pobj.releaseCapture();

				pobj.style.filter= "Alpha(Opacity=100)";		

			}else{

				window.releaseEvents(this.MOUSEMOVE);

				pobj.style.opacity = 1;

			}		

		}

	}

}

lihan6415151528 2009-02-05

打赏
举报

http://blog.csdn.net/lihan6415151528/archive/2008/10/29/3175958.aspx

頑笑 2009-02-05

打赏
举报

[Quote=引用 2 楼 cloudgamer 的回复:]
可以看看这个
[/Quote]
我看出来了，我的这个源码是prototype.js。
汗。。。

頑笑 2009-02-04

打赏
举报

[Quote=引用 4 楼 Jermaine 的回复:]
资源包不存在。。。div托拽已经有很多成熟的js框架实现了，比如dojo,scriptaculous等等，而且使用起来很方便，LZ可以去查下资料，很简单的
[/Quote]
是的，可能是csdn的问题(还没有通过验证吧)，不过我下的这个源代码绝对有学习价值，可以把邮箱给我我发给你们看看。

頑笑 2009-02-04

打赏
举报

[Quote=引用 5 楼 neo_yoho 的回复:]
看cloudgamer的一定会有收获的
[/Quote]
是的，受益匪浅。

neo_yoho 2009-02-04

打赏
举报

看cloudgamer的一定会有收获的

Jermaine 2009-02-04

打赏
举报

资源包不存在。。。div托拽已经有很多成熟的js框架实现了，比如dojo,scriptaculous等等，而且使用起来很方便，LZ可以去查下资料，很简单的

ace112212 2009-02-04

打赏
举报

1楼的那个就可以了

cloudgamer 2009-02-04

打赏
举报

可以看看这个

fihuang 2009-02-04

打赏
举报

绝对精简！昨天一位csdn高手回复我的帖子！



<div style="position:absolute; top:200px; left:400px; width:58px; height:15px; border:1px #666666 solid; text-align:center; background-color:#CCCCCC; cursor:move" onMouseDown="getFocus(this)" onMouseUp="stopMove(this)" onMouseMove="move(this)">我要移动 </div> 

<script language="javascript"> 

var isMove = false; 

var top = 0; left = 0; x0 = 0, y0 = 0; 



function getFocus(obj) { 

obj.setCapture(); 

top = parseInt(obj.style.top); 

left = parseInt(obj.style.left); 

x0 = event.clientX; 

y0 = event.clientY; 

isMove = true; 

} 



function stopMove(obj) { 

isMove = false; 

obj.releaseCapture(); 

} 



function move(obj) { 

if (isMove) { 

var x1 = event.clientX; 

var y1 = event.clientY; 

obj.style.top = (top + y1 - y0) + "px"; 

obj.style.left = (left + x1 - x0) + "px"; 

} 

} 

</script>