<script type="text/javascript"><!-- var x0=0,y0=0,x1=0,y1=0;//初始化全局变量 var offx=6,offy=6; var moveable=false; var hover='orange';//color; var index=10000;//z-index; //关闭窗口 function closeWin(id) { document.getElementById(id).style.display=document.getElementById(id).style.display=="none"?"block":"none"; } //点击鼠标右键准备开始拖动窗口 function startDrag(obj) { if(event.button==1) { obj.setCapture();//设置鼠标捕获的对象为当前对象,简单说就是获得鼠标拖动 var win = obj; x0 = event.clientX;//记录点击鼠标右键的鼠标坐标 y0 = event.clientY; x1 = parseInt(win.style.left);//记录框架的初始位置——鼠标坐标 y1 = parseInt(win.style.top); normal = obj.style.backgroundColor; win.style.backgroundColor = hover; moveable = true; } } //开始拖动窗口 function drag(obj) { if(moveable) { var win = obj; win.style.left = x1 + event.clientX - x0;//进行坐标运算并控制样式的left与top属性 win.style.top = y1 + event.clientY - y0; document.getElementById("xy").innerHTML = (x1 + event.clientX - x0)+","+(y1 + event.clientY - y0);//显示鼠标的坐标 } } //停止拖动 function stopDrag(obj) { var win = obj; win.style.borderColor = normal; obj.style.backgroundColor = normal; obj.releaseCapture();//从当前对象中释放鼠标捕获的对象,简单说就是鼠标的释放 moveable = false; } // --> </p> <!-- .helpdiv { display: block; border: 1px dashed #749F4d; background-color: #F0FAEB; width: 500px; padding: 5px; position: absolute; z-index:0px; } --> <div id="help" class="helpdiv" style="z-idex:2px;" mce_style="z-idex:2px;" οnmοusedοwn="function onmousedown() { function onmousedown() { function onmousedown() { startDrag(this) } } }" οnmοuseup="function onmouseup() { function onmouseup() { function onmouseup() { stopDrag(this) } } }" οnmοusemοve="function onmousemove() { function onmousemove() { function onmousemove() { drag(this) } } }"> <pre><strong>可移动窗口</strong> <a οnclick="function onclick() { function onclick() { function onclick() { closeWin('help') } } }" href="#" mce_href="#">关闭窗口</a> <strong>说明:整个过程就是控制坐标的移动, 从而来改变样式的left与top属性。 请详细查看代码</strong> </pre> </div> <div style="position: relative; background-color: white; height: 18px; top: 79px; left: 1px;"><span style="color: #ff0000; font-size: 30px;" mce_style="color: #ff0000; font-size: 30px;">拖动过程的坐标显示: </span></div>