因为拖拽的功能并不是说常用到，基本上就是弹窗之类的会用到，而且拖拽用到的代码会比较多，如果丢到Base的封装库中，比较费资源，所以我们可以将拖拽打包成插件，然后再通过插入的方式调用。

什么是插件？

就是通过共有的prototype中的方法，来为这个函数添加共有的方法，也就是在Base.prototype.xxx中又创建了一个Base.prototype.xxx方法，然后名称和function通过传参的方式传入。

创建插件

//插件入口
Base.prototype.extend = function(name, fn) {
    Base.prototype[name] = fn;
}

将拖拽方法改为通过$().extend()方法调用，然后另存为base_drag.js文件

//拖拽功能
$().extend('drag', function() {
    for (var i = 0; i < this.arr.length; i++) {
        addEvent(this.arr[i], 'mousedown', function(e) {
            if (removeSpen(this.innerHTML).length == 0) e.preventDefault();
            var _this = this;
            var cleft = e.clientX - _this.offsetLeft;
            var ctop = e.clientY - _this.offsetTop;
            var login_titile = document.getElementById('login_title');
            if (e.target === login_title) {
                addEvent(document, 'mousemove', move);
                addEvent(document, 'mouseup', up)
            }

            function move(e) {
                var left = e.clientX - cleft;
                var top = e.clientY - ctop;
                if (left < 0) {
                    left = 0;
                } else if (left > getInner().width - _this.offsetWidth) {
                    left = getInner().width - _this.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                } else if (top > getInner().height - _this.offsetHeight) {
                    top = getInner().height - _this.offsetHeight;
                }
                _this.style.top = top + 'px';
                _this.style.left = left + 'px';
                if (typeof _this.setCapture != 'undefined') {
                    _this.setCapture();
                }
            }

            function up() {
                removeEvent(document, 'mousemove', move);
                removeEvent(document, 'mouseup', up);
                if (typeof _this.releaseCapture != 'undefined') {
                    _this.releaseCapture();
                }
            }

            function removeSpen(html) {
                return html.replace(/(^\s*)|(\s*$)/g, '');
            }
        });
    }
    return this;
});

原理就是通过原型里的extend方法通过传参的方式，创建不同的原型中的共有方法，因为是共有的，所以调用的的时候，和之前没啥区别了，只是说这个拖拽函数是通过插入的方式调用的，而且html的head中还要link引入这个新建的js文件，然后还要在link引入base文件后面。

引入的时候放在base后面是因为拖拽函数是要使用Base的原型才能插入的，如果你放在前面，Base函数都没创建出来，你怎么插入，是吧。

控制拖拽触发区域

上一篇我们是只有用户在h2点击的时候才可以触发拖拽效果，然后实际上我们拖拽的时候不一定只是在h2上，也有可能要在其他地方触发，所以我们要考虑到我们可能会有多个触发区域，可以自由控制，那么拖拽函数我们肯定要传入我们要设置的区域。

一般来说就通过数组去保存我们要传入的区域：

//拖拽登录框调用
$().getId('login').drag(['第一个触发区域','第二个触发区域','第三个触发区域']);

//拖拽功能
$().extend('drag', function(tags) {
    for (var i = 0; i < this.arr.length; i++) {
        addEvent(this.arr[i], 'mousedown', function(e) {
            if (removeSpen(this.innerHTML).length == 0) e.preventDefault();
            var _this = this;
            var cleft = e.clientX - _this.offsetLeft;
            var ctop = e.clientY - _this.offsetTop;
            var flag = false;
            for(var i = 0;i<tags.length;i++){
                if(e.target === tags[i]) {
                    flag = true;
                    break;
                }
            }
            if (flag) {
                addEvent(document, 'mousemove', move);
                addEvent(document, 'mouseup', up)
            }

            function move(e) {
                var left = e.clientX - cleft;
                var top = e.clientY - ctop;
                if (left < 0) {
                    left = 0;
                } else if (left > getInner().width - _this.offsetWidth) {
                    left = getInner().width - _this.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                } else if (top > getInner().height - _this.offsetHeight) {
                    top = getInner().height - _this.offsetHeight;
                }
                _this.style.top = top + 'px';
                _this.style.left = left + 'px';
                if (typeof _this.setCapture != 'undefined') {
                    _this.setCapture();
                }
            }

            function up() {
                removeEvent(document, 'mousemove', move);
                removeEvent(document, 'mouseup', up);
                if (typeof _this.releaseCapture != 'undefined') {
                    _this.releaseCapture();
                }
            }

            function removeSpen(html) {
                return html.replace(/(^\s*)|(\s*$)/g, '');
            }
        });
    }
    return this;
});

首先创建一个判断条件flag，然后for语句循环你传入的数组中的值，然后判断，如果用户点击的元素和你传入的触发元素是一样的，将flag的值改为true；然后break退出循环；下面if判断flag是false还是true，是true则添加事件绑定。