Estoy intentando usar arrastrar para mover un div hacia adelante y hacia atrás. Esta parte funciona bien hasta que el div tiene contenido desplazable. Esto no es un problema en un escritorio debido a la barra de desplazamiento, pero ocurre un problema en los dispositivos táctiles. Debido a que el evento táctil está en conflicto con el evento de arrastre, no puedo desplazar el contenido. Intenté crear una condición para detectar si el arrastre era más horizontal que vertical.

Mi esperanza era evitar el arrastre durante una interacción táctil vertical, pero el método de arrastre de la interfaz de usuario aún se dispara y anula el evento táctil. Estoy usando el plugin touch-punch para hacer que el arrastre funcione en dispositivos táctiles, por lo que quizás algo haya complicado la situación. Sería fantástico si pudiera evitar que el método de arrastre de la interfaz de usuario se dispare por completo hasta que se cumpla la condición de arrastre horizontal. Creo que esto eliminaría la interferencia.

// 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;
          }
        }
      }

Aquí hay un violín para demostrar el problema (prueba en un dispositivo táctil):http://jsfiddle.net/jTMxS/2/