Javascript Drag & Drop für Touch-Geräte

Können Sie die Jquery UI für drag und drop mit einer zusätzlichen Bibliothek, übersetzt von Maus-Ereignissen in Berührung, die, was Sie brauchen, ist die Bibliothek, die ich empfehlen, ist https://github.com/furf/jquery-ui-touch-punchmit diesem Ihrem drag-and-drop von Jquery UI auf touch-Geräte

oder Sie können diesen code verwenden, die ich benutze, es konvertiert auch Maus-Ereignisse in Kontakt, und es funktioniert wie Magie.

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

Und in Ihrem Dokument.bereit, rufen Sie einfach die init () - Funktion

code, der sich aus Hier

InformationsquelleAutor der Antwort ryuutatsuo

Danke für die oben genannten codes! - Ich habe versucht, mehrere Optionen, und das war das ticket. Ich hatte Probleme, die preventDefault verhindert das scrollen auf dem ipad - jetzt bin ich die Prüfung für die ziehbaren Elemente und es funktioniert Super so weit.

if (event.target.id == 'draggable_item' ) {
    event.preventDefault();
}

InformationsquelleAutor der Antwort gregpress

Alter thread ich weiß.......

Problem mit der Antwort von @ryuutatsuo ist, dass es blockiert auch keine Eingabe-oder andere element, das reagieren auf die 'Klicks' (z.B. Eingänge), so schrieb ich diese Lösung. Diese Lösung machte es möglich, alle vorhandenen drag und drop-Bibliothek, basiert auf mousedown, mousemove und mouseup-Ereignisse auf jedem touch-Gerät (oder cumputer). Dies ist auch eine cross-browser-Lösung.

Habe ich getestet auf mehreren Geräten und es funktioniert schnell (in Kombination mit der drag-und-drop-Funktion von ThreeDubMedia (siehe auch http://threedubmedia.com/code/event/drag)). Es ist ein jQuery-Lösung, so können Sie es verwenden, nur mit jQuery libs. Ich habe verwendet, jQuery 1.5.1 für es da einige neueren Funktionen arbeiten nicht richtig mit dem IE9 und vor (nicht getestet mit neueren Versionen von jQuery).

Vor Sie irgendwelche drag oder drop Betrieb zu einer Veranstaltung Sie zum aufrufen dieser Funktion wird zunächst:

simulateTouchEvents(<object>);

Sie können auch blockieren alle Komponenten/Kinder für die Eingabe oder zu beschleunigen Ereignisbehandlung mithilfe der folgenden syntax:

simulateTouchEvents(<object>, true); //ignore events on childs

Hier ist der code, den ich schrieb. Ich habe einige nette tricks zur Beschleunigung der Auswertung Dinge (siehe code).

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
 }

$(oo).bind('touchstart touchmove touchend', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), //Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    //https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
}; 

Was es tut:
Auf den ersten, es übersetzt, single-touch-events in Maus-events. Es wird geprüft, ob ein Ereignis verursacht wird, die von einem element auf das element muss verschoben werden. Wenn es sich um ein Eingabe-Elemente wie input, textarea etc, es überspringt die übersetzung, oder, wenn eine standard-Maus-Ereignis verknüpft ist, wird es auch überspringen, eine übersetzung.

Ergebnis:
Jedes element auf ein draggable element noch funktioniert.

Happy coding, greetz,
Erwin Haantjes

InformationsquelleAutor der Antwort Codebeat