正在加载中

最后更新于 2018年11月30日

因为拖拽的功能并不是说常用到,基本上就是弹窗之类的会用到,而且拖拽用到的代码会比较多,如果丢到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则添加事件绑定。

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao