jQuery UI Draggable и прокрутка страницы (на мобильном телефоне)

Question

У меня есть страница с перетаскиваемыми элементами (только по горизонтали).

Если я открываю свою страницу на сенсорном устройстве, я не могу прокрутить страницу вниз, очевидно, потому что страница полна перетаскиваемых элементов. Как я могу снова выполнить прокрутку страницы?

Вот код перетаскиваемым() Я использую:

$('li').draggable({ 
axis: 'x', 
drag: function(event, ui) { 
    if(ui.position.left > 0) 
     ui.position.left = 0; 
    if(ui.position.left < -250) 
     ui.position.left = -250; 
} 
}); 

Answer 1

Только в случае, если кто-то нуждается в этом:

Проблема может быть решена с помощью «ручкой» вариант перетаскиваемым(). Например, если у меня есть div с шириной 500 пикселей, я могу вставить другой (прозрачный) div внутри, выровненный по правому краю (например) и шириной 250 пикселей. Затем я устанавливаю этот последний div как дескриптор перетаскиваемого div.

Answer 2

Использование ручки - очевидный выбор, но в некоторых случаях это не вариант.

В моем сценарии у меня был список входящих, элементы которого вы могли перетащить влево или вправо, чтобы открыть кнопки действий. Весь элемент входящей почты должен быть перетаскиваемым - использование рукоятки перетаскивания будет неинтуитивным.

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

Решение, которое работало для меня было измерить любые изменения в вертикальном положении курсора и использовать 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; 
}); 

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