帮看看这个拖动层的js代码如何改
日期：2014-05-16 浏览次数：20365 次
帮看看这个拖动层的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
为什么第一次拖动的时候它老是会移动到顶端?后面几次就好了.
还有,我只想让它横向的移动,并且只能在它所在表格里横向地移动,改怎么弄?
<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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
