title: Disabling jQuery drag when scrolling contents of draggable item
body: <p>I don't normally make this sort of question / answer, but figured I'd do so, since I've seen this question asked 20+ times, and not a single answer actually works.  In short, the problem is that if you have scrollable content (<code>overflow: auto;</code> anywhere inside of a draggable jQuery item, when you click and drag the scrollbar's the parent draggable container drags along with it. So, I spent some time working up a solution.  </p>
  
  <p>Here's an example of some html that would present this problem:</p>
  
  <pre><code>&lt;div class="draggable" style="width:100px;height:100px;"&gt;
    &lt;div id="content" style="width:80px;height:80px;overflow:auto;"&gt;
      Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The typical way you initialize an element to be draggable, is something like this:</p>
  
  <pre><code>$(".draggable").draggable()
  </code></pre>