(function($){
 $.fn.lasso = function(options) {
   
  var defaults = {
    // path to css to be imported
    stylePath: null,
    lassoClass: "lasso",
    // elements that must be returned as param for onClickAfter event, full selector text
    toListenFor: "*",
    // fired after selected area, array os selected elements as param
    afterSelected: function(arr){},
    // function fired while selecting a zone, event as param(see event properties)
    whileSelecting: function(e){},
    removeAfterSelected: true,
  };
  // extend options
  var options = $.extend(defaults, options);
 
  // lasso html
  var lassoHtml = "<div class='"+options.lassoClass+"'></div>";
 
  // do the job fot each initialization
  this.each(function() {
     obj = $(this);
     
     // set style
     if ( options.stylePath == null || options.stylePath == "" )
     {
        options.stylePath = "border:1px dotted white; background: black; opacity: 0.3";
     }
     else
     {
        $("body").prepend("<style type='text/css'>@import url("+options.stylePath+");</style>");
     }
     
     // deny text selection
     obj.css({  /* Normal browsers */
        "-webkit-user-select" : "none",
        "-khtml-user-select": "none",
        "-moz-user-select" : "none",
        "-o-user-select" : "none",
        "user-select" : "none"
     });
     /* IE */ obj.bind("selectstart", function(){ return false });
     
     // bid selection event
     obj.bind("movestart move moveend", function(e){
        e.stopPropagation();
        // get lasso object
        var lassoObj = $("." + options.lassoClass);
       
        switch( e.type )
        {
            case "movestart":
              // remove old lasso case exists
              if ( lassoObj.length > 0 )
              {
                 lassoObj.remove();
              }
              // append lasso html
              $("body").append(lassoHtml);
              // setup lasso style
              $("." + options.lassoClass).css({
                   "position" : "absolute",
                   "border" : "1px solid silver",
                   "background" : "#908089",
                   "opacity" : "0.2",
                   "filter" : "alpha(opacity=20)",
                   "z-index" : 10000,
                   "width" : 0,
                   "height" : 0,
                   "margin" : 0,
                   "padding" : 0,
                   "top" : e.startX + "px",
                   "left" : e.startY + "px",
              });
              $("body").css("cursor", "default");
            break;
            case "move":
              var ws = options.whileSelecting;
              // check and call it
              if ( typeof ws == "function" ) ws(e);
              // extend lasso
              $("." + options.lassoClass).css({
                   "width" : Math.abs(e.deltaX),
                   "height" : Math.abs(e.deltaY),
                   "left" : (e.deltaX > 0 ? e.startX : e.pageX) + "px",
                   "top" : (e.deltaY > 0 ? e.startY : e.pageY) + "px",
              });
            break;
            case "moveend":
               var lstr = "." + options.lassoClass;
               $("*").bind("click.tempLasso", function(){
                  if ( $(lstr).length > 0 ) $(lstr).remove();
                  // collect garbages
                  $().unbind("click.tempLasso");
               });
               // get selected elements
               var chArr = [];
 
               if ( e.deltaX < 0 )
               {
                  e.startX += e.deltaX;
                  e.startX = Math.abs(e.startX);
               }
               if ( e.deltaY < 0 )
               {
                  e.startY += e.deltaY;
                  e.startY = Math.abs(e.startY);
               }
               var endX = e.startX + Math.abs(e.deltaX);
               var endY = e.startY + Math.abs(e.deltaY);
 
               obj.children(options.toListenFor).each(function(){
                   var os = $(this).offset();
                   var Xfrom = os.left;
                   var Yfrom = os.top;
                   // true as outer* param case required with margins
                   var Xto = $(this).outerWidth() + Xfrom;
                   var Yto = $(this).outerHeight() + Yfrom;
                   if (  ( (e.startX <= Xfrom && Xfrom <= endX) || (e.startX <= Xto && Xto <= endX) ) &&
                         ( (e.startY <= Yfrom && Yfrom <= endY) || (e.startY <= Yto && Yto <= endY) )  )
                   {
                      chArr.push( $(this) );
                   }
               });
               var as = options.afterSelected; // чернобыльская...
               // check and call it
              if ( typeof as == "function" ) as(chArr);
              if ( options.removeAfterSelected ) lassoObj.remove();
            break;
        }
        return;
     });
  });
 };
})(jQuery);
 

$().ready(function(){
    $("#lassoHere").lasso({
       /* метод вызванный после окончания выделения,
           как параметр получает массив элементов в зоне выделения(которые выли указаны в toListenFor)*/
        afterSelected : function(arr){
            var i;
            for ( i=0; i<arr.length; i++ )
            {
                console.log(arr[i].html());
            }
        },
       /* вызывается во время выделения(на каждое движение),
          как параметр получает ивент, т.е.
            е.pageX:
            е.pageY:      Page coordinates of pointer.
            е.startX:
            е.startY:       Page coordinates of pointer at movestart.
            е.deltaX:
            е.deltaY:  Distance the pointer has moved since movestart.
            e.type           event type
            .......
      */
        whileSelecting: function(e)
        {
            console.log('Moving... x['+e.pageX+'], y['+e.pageY+']');
        },
       /* класс лассо */
       lassoClass: "myLassoClass",
      /* путь к стилю для импорта */
      stylePath: null,
     /* убрать лассо после выделения,
          если false то будет убрано про клике на любой элемент */
      removeAfterSelected: false,
    });
});