zoukankan      html  css  js  c++  java
  • JavaScript 拖拽div : ev.clientX

    //鼠标拖动div1:鼠标按住div,在document上拖动
    var oDiv=document.getElementById('div1');
    var disX=0;
    var disY=0;
    oDiv.onmousedown=function(ev){
        var oEvent=ev||event;
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
        document.onmousemove=function(ev){
            var oEvent=ev||event;
            oDiv.style.left=oEvent.clientX-disX+'px';
            oDiv.style.top=oEvent.clientY-disY+'px';
            oDiv.innerHTML = "ev.clientX : "+ ev.clientX +  "<br/>ev.clientY : "+ ev.clientY
                    + "<br/> evOffsetX  : " +disX+ "<br/> evOffsetY  : " +disY
                    +  "<br/> left  : " +  oDiv.style.left    +  "<br/> TOP : " +  oDiv.style.top ;
    
        }
        document.onmouseup=function(ev){
            document.onmousemove=null;
            document.onmousedown=null;
        }
        return false;
    }
    

      

    <body>
      <div id="div1" style=" position: absolute ;left: 20px; top:100px; background: yellowgreen ;  100px ; height: 100px "></div>
    </body>
    

      注意:

    ev.offsetX
    ev.clientX 
    ev.pageX
    ev.screenX
  • 相关阅读:
    RabbitMQ管理
    vc6.0
    SystemTap
    undefined reference to `__imp_socket'
    采集小板校时
    点播播放不出来
    抓包注意事项
    下载rfc
    CLion快捷键
    rtsp vlc请求实例
  • 原文地址:https://www.cnblogs.com/July-/p/5774340.html
Copyright © 2011-2022 走看看