Tip: you can modify some code before running
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Js simple drag</title><style>*{margin:0;padding:0;overflow:hidden}html,body{width:100%;height:100%;}#SeachWin {width:508px;height:324px;overflow:hidden;position:absolute;background-color:#cff;cursor:default;text-align:center;line-height:200px;}#SeachWin tt#SeachTitle{display:block;font-size:12px;height:24px;line-height:26px;padding-left:25px;color:#fff;background-color:#00f;}</style><script>var IsD=false;//当前是否可以拖动var marx;//按下左键时光标的X坐标与对话框的X坐标之差var mary;//按下左键时光标的Y坐标与对话框的Y坐标之差function MoveDown(event){//按下左键时获取光标的坐标与对话框的坐标之差if(IsD==false){var d=document.getElementById("SeachWin");marx=d.style.left;mary=d.style.top;marx=marx.replace('px','');mary=mary.replace('px','');marx=marx-(event.x ? event.x : event.pageX);mary=mary-(event.y ? event.y : event.pageY);}IsD=true;}function move1(event){//改变对话框的坐标实现移动(对话框的坐标=按下左键时获取光标的坐标与对话框的坐标之差+移动后的光标坐标)if(IsD==true){var d=document.getElementById("SeachWin");var x=eval((event.x ? event.x : event.pageX)+marx);var y=eval((event.y ? event.y : event.pageY)+mary);if(y<0)y=0;d.style.left=x +"px";d.style.top=y+"px";}}function DocOut(){//鼠标移出body外时，搜索框不能拖动IsD=false;}//document.onmousemove=move1;//document.onmouseout=DocOut;</script></head><body onmousemove="move1(event)" onmouseout="IsD=false;//鼠标移出body外时，搜索框不能拖动"> <!--<body>--><div id="SeachWin"> <tt id="SeachTitle" onmousedown="MoveDown(event);" onmouseup="IsD=false;//鼠标移出后，搜索框不能拖动" onselectstart="return false" oncontextmenu="window.event.returnValue=false">Click the left button in this area to drag it.</tt>This is a simulated dialog box.</div></body></html>
Tip: you can modify some code before running
