jquery-ui เรียงลำดับได้ | วิธีทำให้มันทำงานบน iPad / touchdevices?


116

ฉันจะทำให้คุณสมบัติการจัดเรียง jQuery-UI ทำงานบน iPad และอุปกรณ์ระบบสัมผัสอื่น ๆ ได้อย่างไร

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

ผมพยายามที่จะใช้event.preventDefault();, event.cancelBubble=true;และevent.stopPropagation();ด้วยtouchmoveและscrollเหตุการณ์ที่เกิดขึ้น แต่ผลที่ได้ก็คือว่าหน้าไม่เลื่อนได้อีกต่อไป

ความคิดใด ๆ ?


มีรายงานข้อบกพร่องสำหรับสิ่งนี้หรือไม่?
Marc-André Lafortune

สิ่งนี้สามารถใช้งานได้หรือไม่? github.com/mattbryson/TouchSwipe-Jquery-Plugin
jinglesthula

คำตอบ:


216

พบวิธีแก้ปัญหา (ทดสอบกับ iPad แล้วเท่านั้น!)!

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


9
สิ่งนี้ใช้ได้กับแท็บเล็ต Android ด้วย ทดสอบโดยเฉพาะบนแท็บ Samsung Galaxy 10.1 บน Android 3.1
ไร้สาระ

3
ใช้งานได้กับ Samsung Galaxy S2 พร้อม Android 2.3.4
MrUpsidown

1
ทำงานบน Samsung Galaxy S2 พร้อม Android 4.1.2
Wessel Kranenborg

2
ใช้งานได้ดีมาก! แม้ว่าฉันจะมีตารางที่ครอบคลุมทั้งหน้าดังนั้นจึงเป็นเรื่องยากที่จะเลื่อนขึ้นลงโดยไม่ต้องย้ายองค์ประกอบ มีใครพูดถึงปัญหานี้บ้าง? การเพิ่มบางสิ่งเพื่อป้องกันไม่ให้องค์ประกอบเคลื่อนไหวจนกว่าพวกเขาจะสัมผัสกับองค์ประกอบนั้นเป็นเวลา X วินาทีควรทำเคล็ดลับหรือไม่?
ทอม

2
ตั้งแต่วันที่ 1/2557 จะไม่ทำงานบน Internet Explorer ของ Windows Phone หวังว่าเมื่อเบราว์เซอร์อื่นพร้อมใช้งานสิ่งนี้จะใช้งานได้
edcincy

7

เพื่อให้sortableทำงานบนมือถือ ฉันใช้หมัดสัมผัสเช่นนี้:

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

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

จดบันทึกการเพิ่มdisableSelection();หลังจากสร้างอินสแตนซ์แบบเรียงลำดับได้


0

ทอมฉันได้เพิ่มรหัสต่อไปนี้ในเหตุการณ์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.