title: jquery overscroll + draggable items
body: <p>I have a part of html code:</p>
  
  <pre><code>&lt;div class="stories"&gt;
      &lt;div class="story"&gt;                         
          &lt;div class=".."&gt;
              &lt;img alt="" class=".."&gt;
          &lt;/div&gt;
          &lt;div class="dragger"&gt;&lt;/div&gt; 
      &lt;div&gt;
  
      &lt;div class="story"&gt;
          ...
          &lt;div class="dragger"&gt;&lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>"dragger" is an element allows you to drag "story" block on a page with this jquery code:</p>
  
  <pre><code>$('.dragger').mousedown(function(e){
      $(this).parent().draggable({
          disabled: false, opacity: 0.5, zIndex: 2700, revert: true,
          stop: function() { $(this).draggable({ disabled: true }) }
  })
  </code></pre>
  
  <p>It works very good until I put this "story" element into an overscroll area. I would like to make scrolling when I manage 'click and drag' anywhere besides small area which is a "dragger". So eg. when I mousedown on a story I want to scroll. I tried to use 'cancelOn' parameter with a ".dragger" but it doesn't work as I wish - scrolling is being blocked but (and I don't know why) "story" item is also not able to be dragged then over the page.</p>
  
  <p>Here is a code of 'overscroll'</p>
  
  <pre><code>$(".scheduled").overscroll({
      direction: 'horizontal',
      wheelDirection: 'horizontal',
      wheelDelta: 80,
      cancelOn: ".dragger"
  });
  </code></pre>
  
  <p>".scheduled" is an "upper" div in which stories are put. Do you have some ideas?</p>
  
  <p>Regards,
  galsan</p>