自写jQuery框选Selector

/**

  name:selector.js
  component:jQuery Selector
  version:0.0.1
  autor:fight
  date:2010年6月26日15:14:06
**/

(function($) {
 
 var initSelector = function(container) {
  if(typeof container._init == 'undefined') {
   new selector(container).init();
  }
 };
 
 function selector(container) {
  return {
   options : {
    container:container,
    selected:new Array(),
    target : new Array(),
    area : {startX:10000,startY:10000,endX:0,endY:0},
    x_firstSelected : null,
    x_lastSelected : null,
    y_firstSelected : null,
    y_lastSelected : null,
    x_spacing : 0,
    y_spacing : 0
   },
   createDrawRect : function() {
    var _this = this;
    $(this.options.container).css('position','absolute');
    if(typeof this.options.container._init == 'undefined') {
     var drawRect = $('<div><div class="rectHelp"></div></div>').addClass('drawRect');
     $(this.options.container).append(drawRect);
     this.options.container.drawRect = drawRect;
     this.options.container._init = true;
     this.options.container.isDragSelection = false;
     this.options.container.dragSelectStartX = 0;
     this.options.container.dragSelectStartY = 0;
     this.options.container.selector = _this;
     drawRect.bind('mousedown',function(e){return false;}).bind('dblclick',function(e){
      var temp = _this.getSelectedObj();
      for(var index in temp) {
       temp[index].children('img').trigger('dblclick');
      }
     })
     .draggable({containment:$(container),
      start : function(event,ui) {
//       this.startX = $(this).position().left;
//       this.startY = $(this).position().top;
       this.startX = event.clientX+document.documentElement.scrollLeft;
       this.startY = event.clientY+document.documentElement.scrollTop;
      },
      drag : function(event,ui) {
       if($(this).position().top <= 3) {
        this.offsetY = 0;
       } else {
        this.offsetY = event.clientY+document.documentElement.scrollTop - this.startY;
        this.startY = event.clientY+document.documentElement.scrollTop;
       }
       if($(this).position().left <= 3) {
        this.offsetX = 0;
       } else {
        this.offsetX = event.clientX+document.documentElement.scrollLeft - this.startX;
        this.startX = event.clientX+document.documentElement.scrollLeft;
       }
       _this.translation(this.offsetX,this.offsetY);
      },
      stop : function(event,ui) {
//       alert($(this).position().top+","+$(this).position().left);
//       this.offsetX = $(this).position().left - this.startX;
//       this.offsetY = $(this).position().top - this.startY;
//       _this.translation(this.offsetX,this.offsetY);
      }
     });
     $(this.options.container).bind('mousedown',function(e) {
      var evt = e || window.event;
//      var startX = this.drawRect.offset().left;
//      var startY = this.drawRect.offset().top;
//      var endX = this.drawRect.offset().left + this.drawRect.width();
//      var endY = this.drawRect.offset().top + this.drawRect.height();
//      
//      if(this.drawRect.css('display') != 'none') {
//       if(evt.clientX>startX && evt.clientX<endX && evt.clientY>startY && evt.clientY<endY)
//       return false;
//      }
      this.drawRect.hide().width(0).height(0);
      this.isDragSelection = true;
      this.dragSelectStartX = evt.clientX+document.documentElement.scrollLeft-$(this).offset().left;
      this.dragSelectStartY = evt.clientY+document.documentElement.scrollTop-$(this).offset().top;
      _this.removeSelectTarget();
      return false;
     }).bind('mousemove',function(e) {
      if(this.isDragSelection) {
       var evt = e || window.event;
       var currentX = evt.clientX+document.documentElement.scrollLeft-$(this).offset().left-1;
       var currentY = evt.clientY+document.documentElement.scrollTop-$(this).offset().top-1;
       var boxStartX = this.dragSelectStartX < currentX ? this.dragSelectStartX:currentX;
       var boxStartY = this.dragSelectStartY < currentY ? this.dragSelectStartY:currentY;
       var boxWidth = Math.abs(this.dragSelectStartX - currentX);
       var boxHeight = Math.abs(this.dragSelectStartY - currentY);
       this.drawRect.css({width:boxWidth,height:boxHeight,top:boxStartY,left:boxStartX}).show();
      }
      //return false;
     }).bind('mouseup',function(e) {
      if(this.isDragSelection) {
       var evt = e || window.event;
       this.isDragSelection = false;
       var area = {};
       area.startX = this.drawRect.offset().left;
       area.startY = this.drawRect.offset().top;
       area.endX = this.drawRect.offset().left + this.drawRect.width();
       area.endY = this.drawRect.offset().top + this.drawRect.height();
       _this.getSelectTarget(area);
       return false;
      }
     }).bind('selectstart',function(e) {
      if(document.activeElement.tagName!='INPUT')
       return false;
     });
     drawRect.addContextMenu('drawRect',{
      bindings:{
       'align':function(t) {
        _this.adjustX();
       },
       'x_spacing' : function(t) {
        _this.adjustX_spacing(-1);
       }
      }
     });
     $(document).bind('mouseup',function(e) {
      if(_this.options.container.isDragSelection) {
       _this.options.container.isDragSelection = false;
       var area = {};
       area.startX = _this.options.container.drawRect.offset().left;
       area.startY = _this.options.container.drawRect.offset().top;
       area.endX = _this.options.container.drawRect.offset().left + _this.options.container.drawRect.width();
       area.endY = _this.options.container.drawRect.offset().top + _this.options.container.drawRect.height();
       _this.getSelectTarget(area);
       return false;
      }
     });
    }
   },
   init : function() {
    this.createDrawRect();
   },
   setTarget : function(obj) {
    obj = $(obj);
    obj.css('position','absolute');
    obj.bind('mousedown',function(e) {return false;});
    obj.css('zIndex',102);
    this.options.target.push(obj);
   },
   getSelectTarget : function(area) {
    var flag = false;
    var startX=10000,startY=10000,endX=0,endY=0;
    this.options.selected = new Array();
    for(var index=0;index<this.options.target.length;index++) {
     var obj = this.options.target[index];
     var position;
     if(this.isExitInSelectArea(obj,area)) {
      obj.addClass('selected');
      this.options.selected.push(obj);
      position = this.getPosition(obj);
      if(startX > position.startX) {
       startX = position.startX;
       this.options.x_firstSelected = obj;
      } else if(startX == position.startX) {
       if(this.getPosition(this.options.x_firstSelected).startY > position.startY) {
        this.options.x_firstSelected = obj;
       }
      }
      if(startY > position.startY) startY = position.startY;
      if(endX < position.endX) endX = position.endX;
      if(endY < position.endY) endY = position.endY;
      flag = true;
     }
    }
    if(flag === false) {
     this.options.container.drawRect.hide();
    } else {
     this.options.container.drawRect.css({left:startX-12,top:startY-12,width:endX-startX+20,height:endY-startY+20});
    }
    this.options.area = {startX:startX,startY:startY,endX:endX,endY:endY};
   },
   getSelectedObj : function() {
    return this.options.selected;
   },
   getXFirstSelected : function() {
    return this.options.x_firstSelected;
   },
   getXlastSelected : function() {
    return this.options.x_lastSelected;
   },
   getYFirstSelected : function() {
    return this.options.y_firstSelected;
   },
   getYlastSelected : function() {
    return this.options.y_lastSelected;
   },
   adjustX : function() {
    var selected = this.getSelectedObj();
    for(var index in selected) {
     var offsetY = this.getXFirstSelected().offset().top - selected[index].offset().top;
     selected[index].css('top',selected[index].position().top+offsetY);
     $(editor).data($(selected[index]).children('img').attr('id')).top += offsetY;
    }
    var area = {};
    area.startX = this.options.container.drawRect.offset().left;
    area.startY = this.options.container.drawRect.offset().top;
    area.endX = this.options.container.drawRect.offset().left + this.options.container.drawRect.width();
    area.endY = this.options.container.drawRect.offset().top + this.options.container.drawRect.height();
    this.getSelectTarget(area);
   },
   adjustX_spacing : function(x_spacing) {
    var selected = this.getSelectedObj();
    if(selected.length == 0) return;
    var flag = selected[0];
    flag.css('left',this.getXFirstSelected().position().left);
    $(editor).data(flag.children('img').attr('id')).left = $(editor).data(this.getXFirstSelected().children('img').attr('id')).left;
    for(var index in selected) {
     var obj = selected[index];
     if(flag == obj) continue;
     var temp = this.getPosition(flag),position = this.getPosition(obj);
     var offsetX = temp.endX + x_spacing - position.startX;
     obj.css('left',obj.position().left + offsetX);
     $(editor).data(obj.children('img').attr('id')).left += offsetX;
     flag = obj;
    }
    var area = {};
    area.startX = this.options.container.drawRect.offset().left;
    area.startY = this.options.container.drawRect.offset().top;
    area.endX = this.options.container.drawRect.offset().left + this.options.container.drawRect.width();
    area.endY = this.options.container.drawRect.offset().top + this.options.container.drawRect.height();
    this.getSelectTarget(area);
   },
   getPosition : function(obj) {
    var position = {}
    var startX = obj.offset().left-$(this.options.container).offset().left;
    var startY = obj.offset().top-$(this.options.container).offset().top;
    position.startX = startX;
    position.startY = startY;
    position.endX = startX+obj.width();
    position.endY = startY+obj.height();
    return position;
   },
   removeSelectTarget : function() {
    for(var index=0;index<this.options.target.length;index++) {
     var obj = this.options.target[index];
     if(obj.hasClass('selected')) {
      obj.removeClass('selected');
     }
    }
   },
   translation : function(offsetX,offsetY) {
    for(var index=0;index<this.options.target.length;index++) {
     var obj = this.options.target[index];
     if(obj.hasClass('selected')) {
      if(offsetY != 0) {
       obj.css('top',$(obj).position().top + offsetY);
      }
      if(offsetX != 0) {
       obj.css('left',$(obj).position().left + offsetX);
      }
      $(editor).data($(obj).children('img').attr('id')).top += offsetY;
      $(editor).data($(obj).children('img').attr('id')).left += offsetX;
//      if(editor.isEdited == 'true') {
//       $(editor).data($(obj).children('img').attr('id')).top = obj[0].offsetTop;
//       $(editor).data($(obj).children('img').attr('id')).left = obj[0].offsetLeft;
//      } else {
//       $(editor).data($(obj).children('img').attr('id')).top = obj[0].parentNode.offsetTop+obj[0].offsetTop;
//       $(editor).data($(obj).children('img').attr('id')).left = obj[0].parentNode.offsetLeft+obj[0].offsetLeft;
//      }
     }
    }
   },
   isExitInSelectArea : function(obj,area) {
    obj = $(obj);
    var objSX = obj.offset().left;
    var objSY = obj.offset().top;
    var objEX = objSX + obj.width();
    var objEY = objSY + obj.height();
    if(objSX>=area.startX && objSX<=area.endX && objSY>=area.startY && objSY<= area.endY  &&
       objEX>=area.startX && objEX<=area.endX && objEY>=area.startY && objEY<= area.endY) {
     return true;
    }
    return false;
   }
  };
 }
 
 $.fn.addSelector = function() {
  return this.each(function(){
   initSelector(this);
  });  
 };
 $.fn.setTarget = function(obj) {
  return this.each(function(){
   if(typeof this._init == 'undefined') {
    initSelector(this);
   }
   this.selector.setTarget(obj);
  }); 
 };
})(jQuery);