组件开发

时间：2015-12-21 23:41:21 阅读：161 评论：0 收藏：0 [点我收藏+]

标签：

//参数不写会报错和参数顺序的问题（json和配置/默认参数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #div1,#div2,#div3,#div4{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        cursor: pointer;
    }
    #div1{
        left: 0;
        background-color: red;
    }
    #div2{
        left: 100px;
        background-color: yellow;
    }
    #div3{
        left: 200px;
        background-color: green;
    }
    #div4{
        left: 300px;
        background-color: blue;
    }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <script>
    window.onload = function(){
        var d1 = new Drag();
        d1.init({ //配置参数
            "id":"div1"
        });

        var d2 = new Drag();
        d2.init({
            "id":"div2",
            "fnDown":function(){
                document.title = "111";
            }
        });

        var d3 = new Drag();
        d3.init({
            "id":"div3",
            "fnDown":function(){
                document.title = "222";
            },
            "fnUp":function(){
                document.title = "333";
            }
        });

        var d4 = new Drag();
        d4.init({
            "id":"div4",
            "fnUp":function(){
                document.title = "888";
            }
        });
    };

    function extend(obj1,obj2){
        for(var attr in obj2){
            obj1[attr] = obj2[attr];
        }
    }

    function Drag(){
        this.oDiv = null;
        this.disX = 0;
        this.disY = 0;
        this.settings = { //默认参数
            "fnDown":function(){}, //shit dowm/down
            "fnUp":function(){}
        };
    }
    Drag.prototype.init = function(opt){
        var This = this;
        this.oDiv = document.getElementById(opt.id);
        extend(this.settings,opt); //配置覆盖默认
        console.log(this.settings);
        this.oDiv.onmousedown = function(ev){
            var oEvent = ev||event;
            This.fnDown(oEvent);
            return false;
        };
    };
    Drag.prototype.fnDown = function(ev){
        this.settings.fnDown(); //调用默认
        this.disX = ev.clientX - this.oDiv.offsetLeft;
        this.disY = ev.clientY - this.oDiv.offsetTop;
        var This = this;
        document.onmousemove = function(ev){
            var oEvent = ev||event;
            This.fnMove(oEvent);
        };
        document.onmouseup = function(){
            This.fnUp();
        };
    };
    Drag.prototype.fnMove = function(ev){
        var x = ev.clientX - this.disX;
        var y = ev.clientY - this.disY;
        this.oDiv.style.left = x + "px";
        this.oDiv.style.top = y + "px";
    };
    Drag.prototype.fnUp = function(){
        this.settings.fnUp();
        document.onmousemove = document.onmouseup = null;
    };

    </script>
</body>
</html>

组件开发

标签：

原文地址：http://www.cnblogs.com/jiujiaoyangkang/p/5065185.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行