jquery-ui có thể sắp xếp | Làm thế nào để nó hoạt động trên iPad / thiết bị cảm ứng?

116

Làm cách nào để tính năng có thể sắp xếp jQuery-UI hoạt động trên iPad và các thiết bị cảm ứng khác?

Tôi đã cố gắng sử dụng event.preventDefault();, event.cancelBubble=true;và event.stopPropagation();với touchmovevà các scrollsự kiện, nhưng kết quả là trang không còn cuộn nữa.

Có ý kiến gì không?

— eventhorizon
nguồn

Có một báo cáo lỗi cho điều này?

— Marc-André Lauckyne

Một cái gì đó như thế này có thể được sử dụng? github.com/mattbryson/TouchSwipe-Jquery-Plugin

— jinglesthula

Câu trả lời:

216

Đã tìm thấy một giải pháp (chỉ được thử nghiệm với iPad cho đến nay!)!

http://touchpunch.furf.com/content.php?/sortable/default-f Chức năng

— eventhorizon
nguồn

Tính năng này cũng hoạt động trên máy tính bảng Android. Cụ thể là thử nghiệm trên Samsung Galaxy tab 10.1 trên Android 3.1.

— vắng mặt

Hoạt động trên Samsung Galaxy S2 với Android 2.3.4

— MrUpsidown

Hoạt động trên Samsung Galaxy S2 với Android 4.1.2

— Wessel Kranenborg

Điều này hoạt động tuyệt vời! Mặc dù tôi có một bảng bao phủ toàn bộ trang nên việc cuộn lên và xuống mà không di chuyển các phần tử trở nên khó khăn. Có ai giải quyết vấn đề này? Thêm thứ gì đó để ngăn các phần tử di chuyển cho đến khi chúng chạm vào phần cụ thể đó trong X giây có nên làm thủ thuật không?

— Tom,

Kể từ 1/2014, nó không hoạt động trên Internet Explorer của Windows Phone. Hy vọng rằng, khi các trình duyệt khác có sẵn, điều này sẽ hoạt động.

— edcincy

Để thực hiện sortablecông việc trên thiết bị di động. Tôi đang sử dụng cú đấm chạm như thế này:

$("#target").sortable({
  // option: 'value1',
  // otherOption: 'value2',
});

$("#target").disableSelection();

Lưu ý thêm disableSelection();sau khi tạo phiên bản có thể sắp xếp.

— vpibano
nguồn

Tom, tôi đã thêm mã sau vào sự kiện mouseProto._touchStart :

var time1Sec;
var ifProceed = false, timerStart = false;
mouseProto._touchStart = function (event) {

    var self = this;

    // Ignore the event if another widget is already being handled
    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
        return;
    }

    if (!timerStart) {
        time1Sec = setTimeout(function () {
            ifProceed = true;
        }, 1000);
        timerStart=true;
    }
    if (ifProceed) {
        // Set the flag to prevent other widgets from inheriting the touch event
        touchHandled = true;

        // Track movement to determine if interaction was a click
        self._touchMoved = false;

        // Simulate the mouseover event
        simulateMouseEvent(event, 'mouseover');

        // Simulate the mousemove event
        simulateMouseEvent(event, 'mousemove');

        // Simulate the mousedown event
        simulateMouseEvent(event, 'mousedown');
        ifProceed = false;
         timerStart=false;
        clearTimeout(time1Sec);
    }
};

— Karan Dubal
nguồn