jquery-ui 정렬 가능 | iPad / 터치 장치에서 어떻게 작동합니까?


116

iPad 및 기타 터치 장치에서 작동하는 jQuery-UI 정렬 가능 기능을 얻으려면 어떻게해야합니까?

http://jqueryui.com/demos/sortable/

내가 사용하는 시도 event.preventDefault();, event.cancelBubble=true;event.stopPropagation();touchmovescroll이벤트,하지만 결과는 페이지가 더 이상 이동하지 않는 것이 었습니다.

어떤 아이디어?


이것에 대한 버그 보고서가 있습니까?
Marc-André Lafortune 2014-06-25

이와 같은 것이 유용 할 수 있습니까? github.com/mattbryson/TouchSwipe-Jquery-Plugin
jinglesthula

답변:


216

해결책을 찾았습니다 (지금까지 iPad에서만 테스트되었습니다!)!

http://touchpunch.furf.com/content.php?/sortable/default-functionality


9
이것은 Android 태블릿에서도 작동합니다. Android 3.1의 Samsung Galaxy 탭 10.1에서 특별히 테스트되었습니다.
결근

3
Android 2.3.4가
설치된

1
Android 4.1.2가
설치된

2
이것은 훌륭하게 작동합니다! 전체 페이지를 덮는 표가있어 요소를 이동하지 않고 위아래로 스크롤하기가 어렵습니다. 이 문제를 해결 한 사람이 있습니까? 요소가 특정 요소를 X 초 동안 터치 할 때까지 요소가 움직이지 않도록 무언가를 추가하면 트릭을 수행해야합니까?
Tom

2
1 월 1 일부터 Windows Phone의 Internet Explorer에서는 작동하지 않습니다. 바라건대, 다른 브라우저를 사용할 수있게되면 이것이 작동 할 것입니다.
edcincy

7

sortable모바일에서 작업 하기 위해 . 다음 과 같이 터치 펀치를 사용 하고 있습니다.

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

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

disableSelection();정렬 가능한 인스턴스를 만든 후 추가에 유의하십시오 .


0

Tom, 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);
    }
};
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.