Вертикально прокручиваемые и горизонтально перетаскиваемые divs на мобильный

Question

Я пытаюсь создать мобильный сайт с интерфейсом карты. Взаимодействие, которое я хочу создать, - это список карточек, которые я могу прокрутить и убрать, отбросив их. Для этого я в настоящее время использую jQuery UI с jQuery UI Touch Punch, чтобы он работал с сенсорными устройствами.

Проблема, с которой я сталкиваюсь, заключается в том, что при прокрутке с событием касания, начинающимся с div, он использует его только для перетаскивания по горизонтали, игнорируя вертикальное прокручивание. Есть ли способ предотвратить это, или другая библиотека будет лучше соответствовать моим потребностям?

Это сайт, который мне нужен для:

http://tijmen.kervers.nl/B1.2

(это показывает только такое поведение на сенсорном устройстве, работает довольно много штрафа на рабочих столах)

Аналогичный вопрос был задан раньше, но остались без ответа:

JQuery-UI horizontal dragging with vertical scrolling

И менее важный квест ион; перетаскивание довольно резкое, что может быть причиной этого? Я использую несколько библиотек и фреймворков css поверх друг друга, я предполагаю, что что-то сталкивается с пользовательским интерфейсом jQuery. Я буду смотреть на то, что после прокрутки исправлено, но если кто-то знает, что может быть причиной этого, это будет здорово!

EDIT2:

Нет, это было не так. Это был «переход: все .2s»; который возился с движением.

EDIT1: Выглядит это была вызвана динамической шириной дивы я Draggin вокруг:

jQuery UI make the effect less abrupt and jerky

Answer 1

После более поиска я пришел к выводу, что это в настоящее время не представляется возможным. Я предполагаю, что для решения этой проблемы можно написать плагин jQuery, но это выходит за рамки моего уровня мастерства.

Answer 2

У меня была проблема, почти идентичная вашей, и придумал относительно простой обходной путь.

Измерить любое изменение в вертикальном положении курсора и использовать window.scrollBy вручную прокручивать окно на ту же сумму:

var firstY = null;  
var lastY = null; 
var currentY = null; 
var vertScroll = false; 
var initAdjustment = 0; 

// record the initial position of the cursor on start of the touch 
jqDraggableItem.on("touchstart", function(event) { 
    lastY = currentY = firstY = event.originalEvent.touches[0].pageY; 
}); 

// fires whenever the cursor moves 
jqDraggableItem.on("touchmove", function(event) { 
    currentY = event.originalEvent.touches[0].pageY; 
    var adjustment = lastY-currentY; 

    // Mimic native vertical scrolling where scrolling only starts after the 
    // cursor has moved up or down from its original position by ~30 pixels. 
    if (vertScroll == false && Math.abs(currentY-firstY) > 30) { 
     vertScroll = true; 
     initAdjustment = currentY-firstY; 
    } 

    // only apply the adjustment if the user has met the threshold for vertical scrolling 
    if (vertScroll == true) { 
     window.scrollBy(0,adjustment + initAdjustment); 
     lastY = currentY + adjustment; 
    } 

}); 

// when the user lifts their finger, they will again need to meet the 
// threshold before vertical scrolling starts. 
jqDraggableItem.on("touchend", function(event) { 
    vertScroll = false; 
}); 

Это будет точно имитировать родной прокрутки на сенсорном устройстве.