高手进，js拖动的问题！

给一个（不要用jquery等js包），或者修改下，
不明白为什么拖不了



<style>

#t{

position: absolute;

z-index:2;

left: 20px;

top: 30px;

width: 500px;

height: 400px;

background-color:blue;

}

#s{

z-index: 3;

}

</style>


<div id="t">


</div>

<div id="s">

x:<span id='lx'></span><br />

y:<span id='ty'></span>

</div>

<script type='text/javascript'>

var rd=document.getElementById('t');


var mouseX=0;

var mouseY=0;

var sid_x=rd.offsetLeft;


var sid_y=rd.offsetTop;

window.onload=drag_init();


function drag_init()

{


	if(rd.addEventListener)

	{

	rd.addEventListener('mousedown',start_drag, true);

	}

	else

	{

		rd.attachEvent('onmousedown',start_drag);

	}	

}

function start_drag(e)

{


	var e=e||event;

 	

	mouseX=e.clientX;


	mouseY=e.clientY;



	sid_x=rd.offsetLeft;


	sid_y=rd.offsetTop;


	if(rd.addEventListener)

	{

	rd.addEventListener('mousemove',move_drag, true);

	rd.addEventListener('mouseup', stop_drag, true);

	}

	else

	{

		rd.attachEvent('onmousemove', move_drag);

		rd.attachEvent('onmouseup', stop_drag);

	}




}

function move_drag(e){

	var e=e||event;

	mx=e.clientX;


	my=e.clientY;


	sx=rd.offsetLeft;


	sy=rd.offsetTop;


	srX=document.body.scrollLeft;


	srY=document.body.scrollTop;


document.getElementById('lx').innerHTML=sx;

document.getElementById('ty').innerHTML=sy;


 	rd.style.left=(mx+sx+srX)-(mouseX+sid_x)+'px';


	rd.style.top=(my+sy+srY)-(mouseY+sid_y)+'px';


	mouseX=mx;


	mouseY=my;



	sid_x=sx;


	sid_y=sy;



}


function stop_drag(){

alert('go!');

if(rd.removeEventListener)

	{

	rd.removeEventListener('mousemove',move_drag, true);

	rd.removeEventListener('mouseup', stop_drag, true);

	}

	else

	{

		rd.detachEvent('onmousemove', move_drag);

		rd.detachEvent('onmouseup', stop_drag);

	}


}



</script>

7 个解决方案

#1

初步调试了一下 var rd=document.getElementById('t'); 这里rd没获取到。。。。。估计还有问题

#2



<html>

<head><style>

#t{

position: absolute;

z-index:2;

left: 20px;

top: 30px;

width: 500px;

height: 400px;

background-color:blue;

}

#s{

z-index: 3;

}

</style>

<script type='text/javascript'>



var mouseX=0;

var mouseY=0;


window.onload=function()

{

  rd=document.getElementById("t");

//console.log(rd.id);

var sid_x=rd.offsetLeft;

var sid_y=rd.offsetTop;

    if(rd.addEventListener)

    {

    rd.addEventListener('mousedown',start_drag, true);

    }

    else

    {

        rd.attachEvent('onmousedown',start_drag);

    }    

}

function start_drag(e)

{

    var e=e||event;

    mouseX=e.clientX;

    mouseY=e.clientY;

    sid_x=rd.offsetLeft;

    sid_y=rd.offsetTop;

    if(rd.addEventListener)

    {

    rd.addEventListener('mousemove',move_drag, true);

    rd.addEventListener('mouseup', stop_drag, true);

    }

    else

    {

        rd.attachEvent('onmousemove', move_drag);

        rd.attachEvent('onmouseup', stop_drag);

    }

   }

function move_drag(e){

    var e=e||event;

    mx=e.clientX;

    my=e.clientY;

       sx=rd.offsetLeft;

       sy=rd.offsetTop;

       srX=document.body.scrollLeft;

    srY=document.body.scrollTop;

document.getElementById('lx').innerHTML=sx;

document.getElementById('ty').innerHTML=sy;

    rd.style.left=(mx+sx+srX)-(mouseX+sid_x)+'px'; 

    rd.style.top=(my+sy+srY)-(mouseY+sid_y)+'px';

    mouseX=mx;

    mouseY=my;

    sid_x=sx;

    sid_y=sy;

}


function stop_drag(){

alert('go!');

if(rd.removeEventListener)

    {

    rd.removeEventListener('mousemove',move_drag, true);

    rd.removeEventListener('mouseup', stop_drag, true);

    }

    else

    {

        rd.detachEvent('onmousemove', move_drag);

        rd.detachEvent('onmouseup', stop_drag);

    }

}

</script>

</head>

<body>

<div id="t"></div>

<div id="s">

x:<span id='lx'></span><br />

y:<span id='ty'></span>

</div>


</body>

</html>

#3

还有好多小问题。。

#4

能帮忙改下吗？
或者提供一个思路差不多的 `

#5

window.onload=drag_init();
function drag_init(){
……
｝

你这个顺序搞反了。应该

function drag_init(){
……
｝
window.onload=drag_init();

这就跟编程最基础的常识“变量先声明才能使用”一样的道理。

#6

而且 window.onload=drag_init(); 应该写成 window.onload=drag_init;

#7

你这个具体表现如何我没看，如果要现成的，可以看一下GOOGLE个性首页里实现层拖拽定制布局的代码 http://i.google.com

#1