面向对象的拖拽

最新推荐文章于 2021-07-15 20:03:23 发布

chengweng2602

最新推荐文章于 2021-07-15 20:03:23 发布

阅读量110

点赞数

原文链接：https://my.oschina.net/u/3147332/blog/807024

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
    p{color:white;width:100px;height:100px;background:red;cursor:move;position:absolute;margin:0;padding:0;}
    #p1{top:0;left:0;}
    #p2{top:0;left:110px;}
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script>
    $(function(){
        var drag1=new Drag("p1");
        drag1.init();

        var drag2=new Drag("p2");
        drag2.init();
    })
    
    // var oDiv1 = document.getElementById("div1");
    // oDiv1.onmousedown = function(event) {
    //     var disX = event.clientX - oDiv1.offsetLeft;
    //     var disY = event.clientY - oDiv1.offsetTop;
    //     document.onmousemove = function(event) {
    //         oDiv1.style.left = event.clientX - disX + "px";
    //         oDiv1.style.top = event.clientY - disY + "px";
    //     }
    //     document.onmouseup = function() {
    //         document.onmousemove = null;
    //         document.onmouseup = null;
    //     }
    // }
    
    function Drag(id){
        this.obj=document.getElementById(id);
        this.disX=null;
        this.disY=null;
        this.zIndex=null
    }
    Drag.prototype={
        constructor:Drag,
        init:function(){
            var This=this;
            this.obj.onmousedown=function(e){
                var e=e||window.e;
                This.down(e);
                document.onmousemove=function(e){
                    var e=e||window.e;
                    This.move(e)
                }
                document.onmouseup=function(){
                    This.up()
                };
                return false;
            }
        },
        down:function(e){
            this.disX=e.clientX-this.obj.offsetLeft;
            this.disY=e.clientY-this.obj.offsetTop;
        },
        move:function(e){
            this.obj.style.left=e.clientX-this.disX+"px";
            this.obj.style.top=e.clientY-this.disY+"px";
        },
        up:function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }

    </script>
</head>

<body>
    <p class="test" id="p1">Hello</p>11
    <p class="test" id="p2">Hello</p>11
</body>

</html>