日期:2014-05-16 浏览次数:20315 次
<!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>
<style type="text/css">
#main div{position:absolute;width:40px;height:20px;border:1px solid #999;}
</style>
<script type="text/javascript">
var a;
document.onmouseup=function(){if(!a)return;document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);a="";};
document.onmousemove=function (d){if(!a)return;if(!d)d=event;a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";
//输出内容 ;
document.getElementById("output").value= a.id + " 左边:" + a.style.left +" 顶部:" + a.style.top
};
function $(o,e){a=o;document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);b=e.clientX-parseInt(a.style.left);c=e.clientY-parseInt(a.style.top);}
</script>
</head>
<body>
<div id="main">
<div id="div1" style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">节点1</div>
<div id="div2" style="left:150px;top:100px;background:#9cf;" onmousedown="$(this,event)">节点2</div>
<div id="div3" style="left:200px;top:100px;background:#f9c;" onmousedown="$(this,event)">节点3</div>
<div id="div4" style="left:250px;top:100px;background:#9fc;" onmousedown="$(this,event)">节点4</div>
<div id="div5" style="left:300px;top:100px;background:#c9f;" onmousedown="$(this,event)">节点5</div>
<div id="div6" style="left:350px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点6</div>
<div id="div7" style="left:400px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点7</div>
<div id="div8" style="left:450px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点8</div>
<div id="div9" style="left:500px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点9</div>
<div id="div10" style="left:550px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点10</div>
<div id="div11" style="left:600px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点11</div>
<div id="div12" style="left:100px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点12</div>
<div id="div13" style="left:150px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点13</div>
<div id="div14" style="left:200px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点14</div>
<div id="div15" style="left:250px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点15</div>
<div id="div16" style="left:300p