How to find selected elements within a javascript marquee selection box without using a loop?
<p>I am writing my own drag and drop file manager.  This includes a javascript marquee selection box which when active calculates the elements (files) that are intersected and selects them by adding a class to them.</p>

<p>I currently perform the check during a mousemove handler, loop through an array of element coordinates and determine which ones are intersected by the drag and drop selection box.</p>

<p>The function currently looks like this:</p>

<pre><code>selectItems : function(voidindex){

                        var self = this;
                        var coords = self.cache.selectioncoords;

    for(var i=0, len = self.cache.items.length; i&lt;len; i++){
           var item = self.cache.items[i];
           var itemcoords = item.box_pos;

           if(coords.topleft.x &lt; (itemcoords.x+201) &amp;&amp; coords.topright.x &gt; itemcoords.x &amp;&amp; coords.topleft.y &lt; (itemcoords.y+221) &amp;&amp; coords.bottomleft.y &gt; itemcoords.y){
               if(!item.selected){
                  item.selected = true;
                  item.html.addClass('selected').removeClass('activebutton');
                  self.cache.selecteditems.push(i);
                  self.setInfo();
               }
           }
           else{
               if(item.selected){
                  item.selected = false;
                  if(!voidindex || voidindex !== i){
                      item.html.removeClass('selected');
                  }
                  var removeindex = self.cache.selecteditems.indexOf(i);
                  self.cache.selecteditems.splice(removeindex, 1);
                  self.setInfo();
           }
       }
  }
},
</code></pre>

<p>There is lots of dirty logic in the code above which ensures that the DOM is only manipulated when the selection changes.  This is not relevant to the question and can be exluded.  The important part is the intersection logic which checks the coordinates of the element versus the coordinates of the marquee selection box.</p>

<p>Also please note that the item dimensions are fixed at <strong>201px width by 221px height</strong>.</p>

<p>I have tested this and all works perfectly, however I have the need to support potentially thousands of files which would mean that at some point we will start seeing UI performance decrease.</p>

<p>I would like to know if there is anyway to perform intersection detection without looping through the coordinates of each element.</p>

<p>The coordinates of the marquee box are defined as follows at any given time:</p>

<pre><code> selectioncoords : {
                    topleft : {
                        x : 0,
                        y : 0
                    },
                    topright : {
                        x : 0,
                        y : 0
                    },
                    bottomleft : {
                        x : 0,
                        y : 0
                    },
                    bottomright : {
                        x : 0,
                        y : 0
                    },
                    width : 0,
                    height : 0
                }
</code></pre>

<p>And the coordinates of each item, stored in the self.cache.items array are defined as follows:</p>

<pre><code>item : {
       box_pos : {
             x : 0,
             y : 0
       },
       grid_pos : {
              row : 1,
              column : 1
       }


    }
</code></pre>

<p>So the information available will always be the actual grid position (row/column) as well as the physical item position (left and top offsets in pixels within the grid).</p>

<p>So to summarize, the question is, is there anyway to detect item intersection from a set of marquee selection box coordinates as defined above without looping through the whole array of item coordinates every time the mousemove event fires?</p>

<p>Thanks in advance for any help.</p>
