js 拖动div

<!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=utf-8" />
 <title></title>
 <style>
  .move {height: 200px; position: relative; width: 300px;}
  .move div {background: #fff; border: 1px solid #ccc; height: 100%; position: absolute; width: 100%;}
  .move div .title {background: #eee; border: 0; height: 20px; position: relative; cursor:move;}
  .left {float: left;}
  .clear {float: none; clear: both;}
 </style>
</head>
<body>
<script type="text/javascript">
 var Obj;
 document.onmouseup=MUp;// 事件会在鼠标按键被松开时发生
 document.onmousemove=MMove;//事件会在鼠标指针移动时发生。
 function MDown(objMove, event) {//事件会在鼠标按键被按下时发生
  Obj = objMove.parentNode;
  if (window.event) {
   event = window.event;
   Obj.setCapture();
  }
  else {
   window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
  }
  pX=event.clientX-Obj.offsetLeft;
  pY=event.clientY-Obj.offsetTop;
 }
 function MMove(event) {
  if (window.event) event = window.event;
  if(Obj){
   Obj.style.left=event.clientX-pX + "px";
   Obj.style.top=event.clientY-pY + "px";
  }
 }
 function MUp(event) {
  if(Obj){
   if (window.event) Obj.releaseCapture();
   else window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
   Obj=null;
  }
 }
</script>
</body>
<div class="move left">
 <div>
  <div  class="title" onmousedown="MDown(this, event);">Title</div>
  77989807070970707079079079079797979790
 </div>
</div>
</html>

posted on 2011-07-08 16:29  淡泊以修身，宁静以养性  阅读(618)  评论(2)  编辑  收藏  举报

导航