zoukankan      html  css  js  c++  java
  • js_简练__高效拖拽__工作中可直接引用扩展

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="content-type" charset="utf-8" />
        <meta http-equiv="content-type" content="text/html" />
        <title>demo</title>
    </head>
    <body>
    <p>aaaaaaaaaaa</p>
    <div id="one" style="height:100px;100px;background:red;position:absolute;"></div>
    
    <script>
    var odiv=document.getElementById("one");
    dra(odiv);
    function dra(obj){
        obj.onmousedown=function(e){
            var oe=e||window.event;
            var $this=this;
            var l=oe.clientX-$this.offsetLeft;
            var t=oe.clientY-$this.offsetTop;   
            document.onmousemove=function(e){    
                var oe=e||window.event;
                var ol=oe.clientX-l;
                var ot=oe.clientY-t;
                if(ol<0) ol=0;
                if(ot<0) ot=0;
                if(ot>document.documentElement.clientHeight-$this.offsetHeight) ot=document.documentElement.clientHeight-$this.offsetHeight;
                if(ol>document.documentElement.clientWidth-$this.offsetWidth) ol=document.documentElement.clientWidth-$this.offsetWidth;
                $this.style.left=ol+"px";
                $this.style.top=ot+"px"; 
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
                if($this.releaseCapture) $this.releaseCapture(); 
            }
            if($this.setCapture){
                $this.setCapture();
            }
            if(oe.preventDefault) oe.preventDefault();
            else oe.returnValue=false;
            return false;
        }
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    创建cube 维度层次
    Apress 出版社电子书
    es 集群部署
    redis集群部署
    kafka 简介
    Hadoop伪集群部署
    activitmq+keepalived+nfs 非zk的高可用集群构建
    docker的安装及基础操作与镜像构建
    docker 创建容器与管理容器
    邮箱服务器搭建
  • 原文地址:https://www.cnblogs.com/hcjs/p/2653730.html
Copyright © 2011-2022 走看看