drag-und-drop auf touchscreen

Ich habe die Suche nach einer klaren Anleitung, wie man diese Veranstaltungen ab, und jetzt bin ich mehr verwirrt als als ich anfing.

Bestimmte features für meine Website umfassen drag-and-drop. Derzeit mobilen Geräte (oder alles ohne Maus) unterstützt werden, indem der Benutzer wählen Sie das Element, Tippen Sie auf die "move" - Taste, und berühren Sie dann die drop-point. Das funktioniert zwar ganz gut (die Elemente sind auf ein sichtbares raster), es ist nicht ganz so benutzerfreundlich wie ziehen.

Mein anfängliches Verständnis ist, dass, wo immer ich diesen element.onmousedown, element.onmousemove und element.onmouseup ich kann einfach auch weisen Sie den gleichen handler element.ontouchstart, element.ontouchmove und element.ontouchend bzw.

Jedoch, dass die Blätter die folgenden Fragen:

  • Wie bekomme ich die Koordinaten des touch-Punkt, und was ist relativ?
  • Wird die Ansicht geschwenkt werden (die Standard-Aktion zu ziehen) und wenn das so ist, kündbar?
  • Wie kann ich vermeiden, dass sich mit multi-touch-Aktionen wie kneifen zu vergrößern, wenn ein finger sich auf einem draggable-element?
Es ist erwähnenswert, dass es ist ein sehr guter Grund für fast keine native Unterstützung für drag & drop-in-Handys: es kann behindern das scrollen. Wenn du also erweitern Ihre eigenen persuado drag-and-drop-system für mobile Geräte, dann stellen Sie unbedingt sicher, dass es keine Scrollbalken in die Richtung, dass die drag-Elemente gezogen. Ansonsten, kann eine person versuchen, die Seite scrollen und am Ende, ziehen einen Ihrer draggables. Oder vice-versa.

InformationsquelleAutor Niet the Dark Absol | 2012-08-05

  1. 1

    Können Sie bestimmen, Koordinaten-mess-Gerät-Breite/- Höhe (- Fenster.innerHeight/Fenster.innerWidth).

    Dieser Artikel ist ein guter Ausgangspunkt für touch-Ereignisse und überschreiben Sie:
    http://www.html5rocks.com/en/mobile/touch/

    Multi-touch-gesten sollten nicht mit den draggable Elementen. Können Sie die Bedingungen in Ihrem event-Handler, wenn Sie stören:
    (event-handler)
    if (event.berührt === 1) behandeln Sie das Ereignis

    InformationsquelleAutor joewright

  2. 7

    Die anderen Antworten besser auf die ursprüngliche Frage, aber für die Nachwelt, die, wie ich, diesen link zu versuchen, um ein vorhandenes klicken Sie auf/drag (Maus) - Funktion funktioniert auf touch-screens, dies ist ein sehr nackten Knochen Lösung.

    Wenn Sie Sie Ereignis-Listener hinzufügen, können Sie fügen Sie eine entsprechende 'touchstart' - Zeile zu 'mousedown', zum Beispiel so:

     document.getElementById('throttle').addEventListener('mousedown', mouseDown, false);
 document.getElementById('throttle').addEventListener('touchstart', mouseDown, false);

    Tun das gleiche für jede mousemove (touchmove) und mouseup (touchend).

    In Ihrer Funktionen, wenn man die Koordinaten der Maus, verwenden Sie:

      var top = e.clientY || e.targetTouches[0].pageY; //the same syntax for the x value

    Diese Weise überprüft er, ob ein Maus-klicken und ziehen zuerst, dann, wenn das ist nicht definiert, es sieht für ein touch-Interaktion.

    Wie gesagt, sehr nackt daher, aber es funktionierte für mich zu bekommen begann.

    InformationsquelleAutor Josiah

  3. 0

    Hier ist eine kurze Zusammenfassung über die Unterschiede zwischen mobile-und desktop-screen-Koordinaten: Was ist der Unterschied zwischen screenX/Y, clientX/Y und pageX/Y?

    Und ein Beispiel für die Umsetzung der touchmove Ereignis-listener:

     this.canvas.addEventListener("touchmove", function(e) {
        e.preventDefault();
        touchPosition(e);
    }, false);

var getCanvasPos = function(el) {
    var canvas = document.getElementById(el) || this.getCanvas();
    var _x = canvas.offsetLeft;
    var _y = canvas.offsetTop;

    while(canvas = canvas.offsetParent) {
        _x += canvas.offsetLeft - canvas.scrollLeft;
        _y += canvas.offsetTop - canvas.scrollTop;
    }

    return {
        left : _x,
        top : _y
    }
};

var touchPosition = function(e) {
    var mouseX = e.clientX - this.getCanvasPos(e.target).left + window.pageXOffset;
    var mouseY = e.clientY - this.getCanvasPos(e.target).top + window.pageYOffset;
    return {
        x : mouseX,
        y : mouseY
    };
};

    InformationsquelleAutor Simo Endre

Schreibe einen Kommentar