javascript实现简单的拖拽 

<!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>
<title>div的拖拽</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
*
{
 margin:0px;
 padding:0px;
}
.div1
{
position:absolute;
border:1px solid #000;
width:200px;
height:100px;
margin:10px;
}
</style>
<script type="text/javascript">
var div_x,div_y;
 function init() {  
 var btn = document.getElementById("btn");  
if(window.attachEvent){
   btn.attachEvent("onmousedown", mouseDown);
   btn.attachEvent("onmouseup", mouseUp);
}
else
{
  btn.addEventListener("mousedown", mouseDown, false);  
  btn.addEventListener("mouseup", mouseUp, false); 
}
 }  
 function mouseDown(e) {  
   var e=window.event||e;
   var obj = document.getElementById("ad");
   var target = e.srcElement || e.target;
   target.setCapture();  
   div_x=(e.x?e.x:e.pageX)-parseInt(obj.style.left,10);
   div_y=(e.y?e.y:e.pageY)-parseInt(obj.style.top,10);
   if(window.attachEvent)
   {
    target.attachEvent("onmousemove", mouseMoved);
   } 
   else
   {
    target.addEventListener("mousemove", mouseMoved);  
   }
  }  
 function mouseUp(e) {  
var e=window.event||e;
var target = e.srcElement || e.target;
target.releaseCapture();
 if(window.attachEvent)
{
         target.detachEvent("onmousemove", mouseMoved);
}
else
{
  target.removeEventListener("mousemove", mouseMoved, false);  
}
}  
function mouseMoved(e) {  
var e=window.event||e;
var obj = document.getElementById("ad");
var flag;
if(navigator.appName == 'Microsoft Internet Explorer')
  {
      flag=1;
    }
     else
    {
       flag=0;
    }
if(e.button==flag)
    { 
 //alert("clinetLeft="+obj.clientLeft+";offsetLeft="+obj.offsetLeft);
      divX=obj.clientLeft;
      divY=obj.clientTop
      obj.style.left=divX+(e.x?e.x:e.pageX)-div_x+"px";
      obj.style.top=divY+(e.y?e.y:e.pageY)-div_y+"px";
if(parseInt(obj.style.left,10)+obj.offsetWidth>=document.documentElement.clientWidth)
{
obj.style.left=(document.documentElement.clientWidth-obj.offsetWidth)+"px";
}
     }
    }  
</script>
</head>
<body onload="init();">
<div class="div1" style="top:200px;left:200px" id="ad">
<div id="btn" style="width:200px;height:30px;cursor:move; background-color:red">
</div>
<div>
内容在这里内容在这里
内容在这里内容在这里
内容在这里内容在这里
</div>
</div>
<table><tr><td height="1220"></tr></tr></table>
</body>
</html>

　　

posted @ 2012-03-08 09:37  十年半山  阅读(214)  评论(0)    收藏  举报