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

分类: JavaScript 标签: 插件及控制拖拽触发区域

评论

暂无评论数据

暂无评论数据

目录