title: Get List of DIV below mouse pointer (mouseup event)
body: <p>I am newbee to JQUERY, I have placed Few DIV elements under a "CANVAS" element. When you click on the DIV element, line drawing will start. When i release the mouse in another DIV it will stop (Line will be drawn b/w those DIV elements). Now i would like to add, If i release the mouse outside the DIV it should clear the drawing. I am not able to figure out the correct to way to catch this event to clear the drawing. Please help me.</p>
  
  <p>HTML Element Structure   </p>
  
  <pre><code> &lt;div id="content"&gt;
      &lt;div id="draganddrop" &gt;
          &lt;div id="drag_1" class="hitbox"&gt;&lt;/div&gt;
          &lt;div id="drag_2" class="hitbox"&gt;&lt;/div&gt;
          &lt;div id="drop_1" class="hitbox"&gt;
          &lt;div id="drop_2" class="hitbox"&gt;
      &lt;/div&gt;
      &lt;canvas id="linedrawing" style="pointer-events:none" class="border"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Click Events</p>
  
  <pre><code>&lt;script&gt;
      $(function() { 
          $("#drag_1").mousedown(startDrawing);
          $("#drag_2").mousedown(startDrawing);
  
          $("#drop_1").mousedown(startDrawing);
          $("#drop_2").mousedown(startDrawing);
  
          $("#draganddrop").mousemove(updateDrawing);
          $("#draganddrop").mouseup(finishDrawing);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>If the user release mouse outside "drag_1, drag_2, drop_1, drop_2" i want to clear the drawing. Please help me</p>