jQuery UI 드래그 가능 및 페이지 스크롤 (모바일)

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

이런 경우에 사람이 필요합니다 :

문제가)가 (드래그의 옵션을 "핸들"을 사용하여 해결 될 수

여기 내가 사용 드래그() 코드입니다. 예를 들어 폭이 500px 인 div가있는 경우 오른쪽 (예 :)과 너비가 250px 인 다른 div (투명) div를 삽입 할 수 있습니다. 그런 다음이 마지막 div를 드래그 할 수있는 div의 핸들로 설정합니다.

Answer 2

핸들을 사용하는 것이 확실한 선택이지만 일부 경우에는 옵션이 아닙니다.

내 시나리오에는 왼쪽 또는 오른쪽으로 드래그하여 작업 버튼을 표시 할 수있는받은 편지함 목록이 있습니다. 전체받은 편지함 항목을 드래그 할 수 있어야합니다. 드래그 핸들을 사용하면 직관적이지 않습니다.

jQuery의 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; 
}); 

터치 장치에이 것 밀접하게 모방 기본 스크롤 .