jQuery UI có thể kéo ngăn cản di chuyển trên thiết bị di động

Question

Tôi có các yếu tố có thể kéo có chiều rộng toàn màn hình được liệt kê theo chiều dọc.

Tôi đang sử dụng plugin được gọi là (jquery.ui.touch-punch) để bật jQuery có thể kéo trên thiết bị di động. Nhưng vấn đề là các yếu tố có thể kéo ngăn người dùng di chuyển trang.

$('#novieList .element .content').draggable({ 
    axis: 'x', 
    revert: function() { 
     return $(this).position().left < 30; 
    }, 
    containment: [ 0, 0, 75, 0 ], 
    scope: 'element', 
    scroll: false, 
    delay: 300, 
    drag: function(event, ui) { 
     return true; 
    }, 
    start: function(event, ui) { 
     // Prevent to drag the element after open it 
     var left = $(this).position().left; 
     return left == 0; 
    }, 
    stop: function(event, ui) { 
     var left = $(this).position().left; 
     if (left != 0) { 
      $(this).offset({left: 75}); 
     } 
     return true; 
    } 
}); 

Answer 1

Tôi tìm thấy một giải pháp cho vấn đề đó tại Scrolling jQuery UI touch punch. Bạn phải xóa event.preventDefault() trong jquery.ui.touch-punch.js trên dòng 38. Cho đến nay tôi chỉ thử nghiệm trên Sony Xperia Z1 Compact, Android 5, Chrome, nhưng nó hoạt động rất tốt trong một dự án rất giống với một tên đây.

Answer 2

Tôi có vấn đề liên quan đến việc tôi có thể cuộn trên thiết bị di động khi div của tôi có thể kéo được, vì CSS của giao diện người dùng Jquery có mã sau được đặt thành không, vì vậy bằng cách hoàn nguyên các thay đổi bằng cách đặt chúng vào mọi thứ ban đầu đã hoạt động trở lại!

.ui-kéo-xử lý {! -ms-touch-action: ban đầu quan trọng; cảm ứng hành động: ban đầu quan trọng}

Answer 3

Tôi không tin rằng ý kiến ​​ra event.preventDefault() trong jquery.ui.touch-punch.js tác phẩm nữa. Tôi đã thử các giải pháp tương tự và thấy rằng jQuery UI draggable chính nó đã chặn hành vi mặc định của một cuộn dọc - ngay cả khi phần tử được thiết lập để kéo chỉ dọc theo trục x.

Các giải pháp mà làm việc cho tôi là để đo bất kỳ sự thay đổi ở vị trí thẳng đứng của con trỏ và sử dụng window.scrollBy tự di chuyển cửa sổ bằng cùng lượng:

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

Này di chuyển phía mẹ đẻ sẽ chặt chẽ bắt chước trên một thiết bị cảm ứng .