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
  • 相关阅读:
    char类型细节
    Hibernate面试题
    线程
    IO流
    集合
    链表相关的一点东西
    正则表达式学习
    python中的变量域问题
    python的输出和输入形式
    python mutable 和 immutable
  • 原文地址:https://www.cnblogs.com/July-/p/5774340.html
Copyright © 2011-2022 走看看