zoukankan      html  css  js  c++  java
  • 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; 300px;}
      .move div {background: #fff; border: 1px solid #ccc; height: 100%; position: absolute; 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>

  • 相关阅读:
    流量数据iftop命令
    DNS A记录和CNAME记录
    centos6.5安装mysql
    Python列表插入字典(转)
    列表转字典
    python 二分法O(logn)
    centos 6.5搭建Samba
    反爬虫-----看这一篇就够了
    windows常用命令
    requests中文页面乱码解决方案【转】
  • 原文地址:https://www.cnblogs.com/daviddong/p/2101122.html
Copyright © 2011-2022 走看看