title: Horizontal dragging is blocking the default vertical scroll of the page
body: <p>I have created a <a href="http://codepen.io/anon/pen/yNPzeg" rel="nofollow">codepen</a> of what I'm trying to achieve.</p>
  
  <p>I'm creating a timeline overview with a couple of horizontal draggable items. Next to <code>jquery</code> and <code>jquery-ui</code>, I am also using <code>jquery-ui-touch-punch</code> for make all the gestures possible on mobile devices. On desktop everything works fine but not on mobile.</p>
  
  <p>Unfortunately is the <code>$(".timeLineItemContainer").draggable({ ... });</code> extremely aggressive that it also swallows my vertical scrolling behavior which results in a page where I can't scroll down <strong>on mobile</strong> when I touch 1 of the items.</p>
  
  <p>Somehow I need to enable or disable the drag capability of an item, depending on the direction of my scroll action. When I disable the <code>event.preventDefault();</code> in the <code>jquery-ui-touch-punch.js</code> it scrolls down, only then the <code>click</code> and <code>horizontal move</code> doesn't work properly (a horizontal swipe on mobile refers to a history.goback, which I want to prevent as I need it for my gesture).</p>
  
  <p>To sum things up: All I want is to prevent the default behaviors, except for the vertical scroll.</p>
  
  <p>Any thoughts of how to achieve this? Or are there any other ideas/approaches to achieve this?</p>
  
  <p><a href="http://beta.tst.getroadmap.com/index3.html" rel="nofollow">Here's a link for a mobile version</a></p>
  
  <p><strong>HTML</strong> (just a simple list of multiple items)</p>
  
  <pre><code>        &lt;div class="timeLineItemContainer"&gt;
          &lt;div class="subItemMiddleContainer"&gt;
              &lt;div class="timeLineHeader"&gt;
                  &lt;div&gt;
                      &lt;span&gt;A TITLE&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div&gt;Some other text text&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="subItemBottomContainer"&gt;
              &lt;ul&gt;
                  &lt;li class="static"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="info"&gt;Thu 12 March&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="static"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;some additional text&lt;/span&gt;
                          &lt;span class="info time strikethrough"&gt;bla&lt;/span&gt;
                          &lt;div class="info time attention"&gt;
                              &lt;span&gt;yup&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;Text&lt;/span&gt;
                          &lt;span class="info"&gt;content&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;title&lt;/span&gt;
                          &lt;span class="info"&gt;value&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;Another title&lt;/span&gt;
                          &lt;span class="info"&gt;another value&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="static"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;always visible&lt;/span&gt;
                          &lt;span class="info time strikethrough"&gt;just because&lt;/span&gt;
                          &lt;div class="info attention"&gt;
                              &lt;span&gt;attention!&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="timeLineItemContainer"&gt;
          &lt;div class="subItemMiddleContainer"&gt;
              &lt;div class="timeLineLeft"&gt;
                  &lt;div class="timeLinePipe"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="timeLineHeader"&gt;
                  &lt;div&gt;
                      &lt;span&gt;Some other text&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div&gt;Ola!&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="subItemBottomContainer"&gt;
              &lt;ul&gt;
  
                  &lt;li class="static"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="info"&gt;A date&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;label&lt;/span&gt;
                          &lt;span class="info"&gt;value&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;anotehr label&lt;/span&gt;
                          &lt;span class="info time"&gt;different value&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="timeLineItemContainer"&gt;
          &lt;div class="subItemMiddleContainer"&gt;
              &lt;div class="timeLineHeader"&gt;
                  &lt;div&gt;
                      &lt;span&gt;A TITLE&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div&gt;Some other text text&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="subItemBottomContainer"&gt;
              &lt;ul&gt;
                  &lt;li class="static"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="info"&gt;Thu 12 March&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="static"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;some additional text&lt;/span&gt;
                          &lt;span class="info time strikethrough"&gt;bla&lt;/span&gt;
                          &lt;div class="info time attention"&gt;
                              &lt;span&gt;yup&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;Text&lt;/span&gt;
                          &lt;span class="info"&gt;content&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;title&lt;/span&gt;
                          &lt;span class="info"&gt;value&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;Another title&lt;/span&gt;
                          &lt;span class="info"&gt;another value&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="static"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;always visible&lt;/span&gt;
                          &lt;span class="info time strikethrough"&gt;just because&lt;/span&gt;
                          &lt;div class="info attention"&gt;
                              &lt;span&gt;attention!&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="timeLineItemContainer"&gt;
          &lt;div class="subItemMiddleContainer"&gt;
              &lt;div class="timeLineLeft"&gt;
                  &lt;div class="timeLinePipe"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="timeLineHeader"&gt;
                  &lt;div&gt;
                      &lt;span&gt;Some other text&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div&gt;Ola!&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="subItemBottomContainer"&gt;
              &lt;ul&gt;
  
                  &lt;li class="static"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="info"&gt;A date&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;label&lt;/span&gt;
                          &lt;span class="info"&gt;value&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="toggable closed"&gt;
                      &lt;div class="timeLineRight timeLineInfo"&gt;
                          &lt;span class="label"&gt;anotehr label&lt;/span&gt;
                          &lt;span class="info time"&gt;different value&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var sw = screen.width;
  var thresholdPercentageSwipeTimeLineItem = 15;
  var thresholdPercentageSwipeDetailScreen = 10;    
  
  $(".timeLineItemContainer").draggable({
      scroll: false,
      axis: "x",
      drag: function (event, ui) {
          if (ui.position.left &lt; 0) {
              ui.position.left = 0;
          }
          else {
            if (calculateOffsetPercentage(ui.position.left) &gt; thresholdPercentageSwipeTimeLineItem) {
                return false;
            };
          }
      },
      stop: function (event, ui) {
          $(this).animate({
             left: 0,
          }, {
             duration: 200,
             queue: false
          });
      }
  }).click(function () {
      var nextObjs = $(this).toggleClass("visible").find(".toggable");
  
      $.each(nextObjs, function () {
          $(this).stop().animate({
              height: "toggle",
              queue: false
          }).toggleClass("closed");
      });
  
  });
  
  function calculateOffsetPercentage(screenValue) {
      return (100 / (sw / screenValue));
  }
  </code></pre>