Draggable está bloqueando o evento de toque

Eu estou tentando usar arrastar para mover um div e para trás. Esta parte funciona bem até que o div tenha conteúdo rolável. Isso não é um problema em uma área de trabalho devido à barra de rolagem, mas ocorre um problema nos dispositivos de toque. Como o evento de toque está em conflito com o evento de arrastar, não consigo rolar o conteúdo. Tentei criar uma condição para detectar se o arrasto era mais horizontal que vertical.

Minha esperança era evitar o arrastamento durante uma interação de toque vertical, mas o método de arrastar da interface do usuário ainda dispara e substitui o evento de toque. Eu estou usando o plug-in touch-punch para fazer o trabalho arrastável em dispositivos de toque, então talvez algo aí tenha complicado a situação. Seria ótimo se eu pudesse evitar que o método de arrastar da interface do usuário fosse disparado completamente até que a condição de arrasto horizontal fosse atendida. Eu acho que isso eliminaria a interferência.

// note the condition inside the drag function
      start: function(e){

        // get starting point of the drag
        startDragX = e.pageX;
        startDragY = e.pageY;
      },
      drag: function(e, ui){

        // prevent drag until user has moved 30px horizontally
        if (Math.abs(e.pageX - startDragX) < 30){
          ui.position.left = 0;
        } else {
          if (ui.position.left < 0) {

            // left drag
            ui.position.left = ui.position.left + 30;
          } else {
            // right drag
            ui.position.left = ui.position.left - 30;
          }
        }
      }

Aqui está um violino para demonstrar o problema (teste no dispositivo de toque):http://jsfiddle.net/jTMxS/2/