js面向对象组件开发---拖拽


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            body{
                position: relative;

            }
            #box1{
                position: absolute;
                left: 50px;
                width: 150px;
                height: 150px;
                background: #f00;
                cursor: default;
            }

            #box2{
                position: absolute;
                left: 300px;
                width: 150px;
                height: 150px;
                background: #00f;
                cursor: default;
            }

            #box3{
                position: absolute;
                left: 600px;
                width: 150px;
                height: 150px;
                background: #ff0;
                cursor: default;
            }

            #box4{
                position: absolute;
                left: 800px;
                width: 150px;
                height: 150px;
                background: #f0f;
                cursor: default;
            }
        style>
    head>
    <body>
        <div id="box1">div>
        <div id="box2">div>
        <div id="box3">div>
        <div id="box4">div>
    body>

    <script type="text/javascript">
        window.onload = function(){
            var d1 = new Drag();
            d1.init({ //配置参数
                id:'box1'
            });

            var d2 = new Drag();
            d2.init({
                id:'box2',
                todown:function(){
                    document.title = 'hello';
                }
            });

            var d3 = new Drag();
            d3.init({
                id:'box3',
                todown:function(){
                    document.title = '面向';
                },
                toup:function(){
                    document.title = '对象';
                }
            });

            var d4 = new Drag();
            d4.init({
                id:'box4',
                toup:function(){
                    document.title = 'hi';
                }
            });
        }

    //  构造函数
    function Drag(){
        this.oBox = null;
        this.disX = 0;
        this.disY = 0;
    }

    //方法            ev事件写在函数下面
    Drag.prototype.init = function(options){
        var _this = this;
        this.oBox = document.getElementById(options.id);

        this.setting = {  //默认参数
            todown:function(){},
            toup:function(){}
        }
        extend(this.setting,options);

        this.oBox.onmousedown = function(ev){
            var ev = ev || window.event;
            _this.fnDown(ev);
            _this.setting.todown();                    //调用
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                _this.fnMove(ev);
                _this.setting.todown();
                _this.setting.toup(); 
            };
            document.onmouseup = function(){
                _this.fnUp();
                _this.setting.toup(); 
            };
            return false;

        };
    }


    Drag.prototype.fnDown = function(ev){
        var _this = this;
        this.disX = ev.clientX -  this.oBox.offsetLeft;
        this.disY = ev.clientY -  this.oBox.offsetTop;
    }


    Drag.prototype.fnMove = function(ev){
        this.oBox.style.left = ev.clientX - this.disX + "px";
        this.oBox.style.top = ev.clientY - this.disY + "px";
    }


    Drag.prototype.fnUp = function(){
        document.onmousemove = null;
        document.onmouseup = null;
    }

    //拷贝
    function extend(obj1,obj2){
        for(var i in obj2){
            obj1[i] = obj2[i];
        }
    }


    script>
html>

你可能感兴趣的:(面向对象,面向对象)