title: Enable Shift-Multiselect in jQuery UI Selectable
body: <p>I want to enable multiselect capabilities in a jQuery UI Selectable table by holding <kbd>shift</kbd>.</p>
  
  <p>I probably should do something like this if <kbd>shift</kbd> is held down on mouseclick</p>
  
  <ul>
  <li>Get topmost selected element</li>
  <li>Get clicked element</li>
  <li>Select all elements in between</li>
  </ul>
  
  <p>but i can't find how to do this in a clean way...</p>
  
  <p>At the moment i got this inside the selectable configuration:</p>
  
  <pre><code>start: function(e)
          {
              var oTarget = jQuery(e.target);
              if(!oTarget.is('tr')) oTarget = oTarget.parents('tr');
          }
  </code></pre>
  
  <p>So <code>oTarget</code> is the clicked element (and <code>e.currentTarget</code> is the whole table) but now what? How can i find which elements are already selected in a way that can tell me if the clicked element is over or below the selected ones and select everything in between?</p>
  
  <p>I've solved it now like this, added to the selectable element:</p>
  
  <pre><code>jQuery(table).mousedown(function(e)
      {
          //Enable multiselect with shift key
          if(e.shiftKey)
          {
              var oTarget = jQuery(e.target);
              if(!oTarget.is('.ui-selectee')) oTarget = oTarget.parents('.ui-selectee');
  
              var iNew = jQuery(e.currentTarget).find('.ui-selectee').index(oTarget);
              var iCurrent = jQuery(e.currentTarget).find('.ui-selectee').index(jQuery(e.currentTarget).find('.ui-selected'));
  
              if (iCurrent &lt; iNew) {
                  iHold = iNew;
                  iNew = iCurrent;
                  iCurrent = iHold;
              }
  
              if(iNew != '-1')
              {
                  jQuery(e.currentTarget).find('.ui-selected').removeClass('ui-selected');
                  for (i=iNew;i&lt;=iCurrent;i++) {
                      jQuery(e.currentTarget).find('.ui-selectee').eq(i).addClass('ui-selected');
                  }
                  e.stopImmediatePropagation();
                  e.stopPropagation();
                  e.preventDefault();
                  return false;
              }
          }
      }).selectable(...)
  </code></pre>