当前位置: 代码迷 >> JavaScript >> 帮看看这个拖动层的js代码如何改
  详细解决方案

帮看看这个拖动层的js代码如何改

热度:163   发布时间:2012-02-26 20:19:44.0
帮看看这个拖动层的js代码怎么改
为什么第一次拖动的时候它老是会移动到顶端?后面几次就好了.
还有,我只想让它横向的移动,并且只能在它所在表格里横向地移动,改怎么弄?  

<html   xmlns= "http://www.w3.org/1999/xhtml ">  
<head>  
<meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 "   />  
<title> Untitled   Document </title>  
<script   language= "javascript ">  
var   move_obj_x0,move_obj_y0,move_obj_x1,move_obj_y1;  
var   obj_moveable=false;  
function   startDrag(obj,id)  
{  
if(event.button==1)  
{  
obj.setCapture();  
win=document.getElementById(id)  
move_obj_x0   =   event.clientX;  
move_obj_y0   =   event.clientY;  
move_obj_x1   =   parseInt(win.style.left);  
move_obj_y1   =   parseInt(win.style.top);  
obj_moveable   =   true;  
}  
}  
function   drag(id)  
{  
if(obj_moveable)  
{  
win=document.getElementById(id)  
win.style.left   =   (move_obj_x1   +   event.clientX   -   move_obj_x0> 0)?move_obj_x1   +   event.clientX   -   move_obj_x0:0;  
win.style.top   =   (move_obj_y1   +   event.clientY   -   move_obj_y0> 0)?move_obj_y1   +   event.clientY   -   move_obj_y0:0;  
}  
}  
function   stopDrag(obj,id)  
{  
if(obj_moveable)  
{  
obj.releaseCapture();  
obj_moveable   =   false;  
}  
}  
</script>  
</head>  
<body>  
<table   width= "300 "   height= "45 "   border= "1 "   cellspacing= "0 "   cellpadding= "0 "   onmousedown= "startDrag(this, 'move_test ') "   onmouseup= "stopDrag(this, 'move_test ') "   onmousemove= "drag( 'move_test ') ">  
<tr>  
<td> <div   id= "move_test "   style= "position:absolute;border:1px   solid   #FF0000 ">  
kkkkkkkkkkkkkkkkkkkkkkk  
</div> </td>  
</tr>  
</table>  
</body>  
</html>

------解决方案--------------------
我懒啊,给你段代码,兼容FF/IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN " "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv = "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
</head>

<body>


<div id= "toolbar " style= "position:absolute; left:100px; top:100px; background-color:white; border: solid black; ">
<div style= "background-color:gray; border-bottom:dotted black; padding:3px; font-family:sans-serif; font-weight:bold; " onmousedown= "beginDrag(this.parentNode, event); "> drag me </div>
<p> This is a test. </p>
</div>
<script type= "text/javascript ">
<!--
function beginDrag(elementToDrag, event) {
var deltaX = event.clientX - parseInt(elementToDrag.style.left);
  相关解决方案