zoukankan      html  css  js  c++  java
  • js拖拽的封装

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 100px; height: 100px; background: red; position: absolute;}
    #img1 { position: absolute;}
    </style>
    <script>
    window.onload = function() {
        
        var oDiv = document.getElementById('div1');
        var oImg = document.getElementById('img1');
        
        drag(oImg);
        
        drag(oDiv);
        
        function drag(obj) {
            
            obj.onmousedown = function(ev) {
                var ev = ev || event;
                
                var disX = ev.clientX - this.offsetLeft;
                var disY = ev.clientY - this.offsetTop;
                
                if ( obj.setCapture ) {
                    obj.setCapture();
                }
                
                document.onmousemove = function(ev) {
                    var ev = ev || event;
                    
                    obj.style.left = ev.clientX - disX + 'px';
                    obj.style.top = ev.clientY - disY + 'px';
                }
                
                document.onmouseup = function() {
                    document.onmousemove = document.onmouseup = null;
                    //释放全局捕获 releaseCapture();
                    if ( obj.releaseCapture ) {
                        obj.releaseCapture();
                    }
                }
                
                return false;
                
            }
            
        }
        
    }
    </script>
    </head>
    
    <body>
        <div id="div1"></div>
        <img src="1.jpg" id="img1" />
    </body>
    </html>
  • 相关阅读:
    Explain 索引优化分析
    组合索引与前缀索引
    MySQL 索引的类型
    MySQL 字符集及校验规则
    MySQL 连接查询
    DQL 数据查询语言
    DML 数据操纵语言
    DCL 数据控制语言
    DDL 数据定义语言
    蓝桥杯大学B组省赛2020模拟赛(一)题解与总结
  • 原文地址:https://www.cnblogs.com/nifengs/p/4977517.html
Copyright © 2011-2022 走看看