鼠标框选 下篇

  1 ; (function ($) {
  2 
  3     $.fn.frameSelection = function (options) {
  4         var defaultOpts = {
  5             callback: function () { },
  6             mask: false,
  7             done: function (result) { console.log(result) }
  8         };
  9         var options = $.extend({}, defaultOpts, options);
 10         new FrameSelection($(this), options);
 11     }
 12     /**
 13      * 坐标点
 14      * @param {*} x 
 15      * @param {*} y 
 16      */
 17     function Point(x, y) {
 18         this.x = x;
 19         this.y = y;
 20     }
 21     /**
 22      * 框选构造函数
 23      * @param {*} $rangeEl 容器元素
 24      * @param {*} options 选择项
 25      */
 26     function FrameSelection($rangeEl, options) {
 27         this.$rangeEl = $rangeEl;
 28         this.options = options;
 29 
 30         this.init();
 31     }
 32     /**
 33      * 框选初始化
 34      */
 35     FrameSelection.prototype.init = function () {
 36         this.unbind();
 37         this.bind();
 38     }
 39     /**
 40      * 解除事件绑定
 41      */
 42     FrameSelection.prototype.unbind = function () {
 43 
 44         this.$rangeEl.off(‘mousedown‘);
 45         this.$rangeEl.off(‘mousemove‘);
 46         this.$rangeEl.off(‘mouseup‘);
 47     }
 48     /**
 49      * 绘制接口
 50      */
 51     FrameSelection.prototype.render = function (p1, p2) {
 52         this.options.mask && this.renderMask(p1, p2);
 53         this.renderRect(p1, p2);
 54     }
 55     /**
 56      * 清理元素
 57      */
 58     FrameSelection.prototype.clear = function () {
 59         this.$rangeEl.find(‘.rect,.mask‘).remove();
 60     }
 61 
 62     /**
 63      * 创建遮罩层
 64      */
 65     FrameSelection.prototype.renderMask = function (p1, p2) {
 66         var $rect = this.$rangeEl.find(‘div.rect‘);
 67         var $top = this.$rangeEl.find(‘div.mask:eq(0)‘),
 68             $left = this.$rangeEl.find(‘div.mask:eq(1)‘),
 69             $right = this.$rangeEl.find(‘div.mask:eq(2)‘),
 70             $bottom = this.$rangeEl.find(‘div.mask:eq(3)‘);
 71 
 72         $top.css({
 73             top: this.$rangeEl.css(‘top‘),
 74             left: this.$rangeEl.css(‘left‘),
 75             width: this.$rangeEl.width(),
 76             height: $rect.css(‘top‘)
 77         });
 78 
 79         $left.css({
 80             top: $rect.css(‘top‘),
 81             left: $top.css(‘left‘),
 82             width: $rect.css(‘left‘),
 83             height: $rect.height()
 84         });
 85 
 86         $right.css({
 87             top: $rect.css(‘top‘),
 88             left: $left.width() + $rect.width(),
 89             width: this.$rangeEl.width() - ($left.width() + $rect.width()),
 90             height: $left.height()
 91         });
 92 
 93         $bottom.css({
 94             top: $top.height() + $left.height(),
 95             left: this.$rangeEl.css(‘left‘),
 96             width: $top.width(),
 97             height: this.$rangeEl.height() - ($top.height() + $left.height())
 98         });
 99 
100     }
101     /**
102      * 创建矩形选框
103      */
104     FrameSelection.prototype.renderRect = function (p1, p2) {
105         var $rect = this.$rangeEl.find(‘div.rect‘);
106 
107         $rect.css({
108             top: Math.min(p1.y, p2.y),
109             left: Math.min(p1.x, p2.x),
110             width: Math.abs(p1.x - p2.x),
111             height: Math.abs(p1.y - p2.y)
112         })
113 
114     }
115     /**
116      * 创建元素
117      */
118     FrameSelection.prototype.create = function (eleDes, n, callback) {
119         var desArr = eleDes.split(‘.‘);
120         var eleName = desArr[0], className = desArr[1] || ‘‘, eles = ‘‘;
121 
122         for (var i = 0; i < n; i++) {
123             eles += `<${eleName} class="${className}"></${eleName}>`;
124         }
125 
126         callback && typeof callback === "function" && callback($(eles));
127 
128     }
129     FrameSelection.prototype.createElToDom = function () {
130         //默认不绘制mask
131         var fn = ($eles) => {
132             $eles.appendTo(this.$rangeEl);
133         }
134         this.options.mask && this.create(‘div.mask‘, 4, fn);
135         this.create(‘div.rect‘, 1, fn);
136 
137         typeof this.options.callback === ‘function‘ && this.options.callback();
138     }
139     /**
140      * 注册事件绑定
141      */
142     FrameSelection.prototype.bind = function () {
143         var self = this;
144         this.$rangeEl.bind(‘mousedown‘, function (event) {
145             var start = new Point(event.pageX, event.pageY);
146             //清理
147             self.clear();
148             self.createElToDom();
149 
150             self.$rangeEl.bind(‘mousemove‘, function (e) {
151                 var end = new Point(e.pageX, e.pageY);
152                 //绘制
153                 self.render(start, end);
154 
155             })
156         });
157 
158         this.$rangeEl.bind(‘mouseup‘, function (e) {
159             self.$rangeEl.off(‘mousemove‘);
160         })
161     }
162 })(window.jQuery);