it-swarm.com.de

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

Ich suche ein Drag & Drop-Plugin, das auf Touch-Geräten funktioniert.

Ich möchte eine ähnliche Funktionalität wie das jQuery UI-Plugin , das "droppable" -Elemente zulässt.

Das jqtouch-Plugin unterstützt das Ziehen, aber kein Ablegen.

Hier ist Drag & Drop, das nur iPhone/iPad unterstützt.

Kann mich jemand auf ein Drag & Drop-Plugin hinweisen, das auf Android/ios funktioniert?

... Oder es ist möglich, das jqtouch-Plugin zu aktualisieren, damit es gelöscht werden kann. Es läuft bereits auf Andriod und IOS.

Vielen Dank!

115
joe

Sie können die Jquery-Benutzeroberfläche zum Ziehen und Ablegen mit einer zusätzlichen Bibliothek verwenden, die Mausereignisse in Berührungen übersetzt. Ich empfehle die Bibliothek https://github.com/furf/jquery-ui-touch) -punch , damit sollte dein Drag & Drop von der Jquery-Benutzeroberfläche auf Touch-Geräten funktionieren

oder Sie können diesen Code verwenden, den ich verwende. Er wandelt auch Mausereignisse in Berührungen um und 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. Rufen Sie einfach die Funktion init () auf

code gefunden von hier

254
ryuutatsuo

Wenn Sie dies nutzen und die Klickfunktion beibehalten möchten (wie John Landheer in seinem Kommentar erwähnt), können Sie dies mit ein paar Änderungen tun:

Fügen Sie ein paar Globals hinzu:

var clickms = 100;
var lastTouchDown = -1;

Ändern Sie dann die switch-Anweisung vom Original in:

var d = new Date();
switch(event.type)
{
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
}

Möglicherweise möchten Sie "clickms" an Ihren Geschmack anpassen. Grundsätzlich wartet man nur auf einen 'Touchstart', gefolgt von einem 'Touchend', um einen Klick zu simulieren.

21
E.Z. Hart

Danke für die obigen Codes! - Ich habe verschiedene Optionen ausprobiert und dies war das Ticket. Ich hatte Probleme damit, dass preventDefault das Scrollen auf dem iPad verhinderte. Ich teste jetzt auf ziehbare Elemente und es funktioniert bis jetzt hervorragend.

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

Ich hatte die gleiche Lösung wie gregpress answer , aber meine ziehbaren Elemente verwendeten eine Klasse anstelle einer ID. Es scheint zu funktionieren.

var $target = $(event.target);  
if( $target.hasClass('draggable') ) {  
    event.preventDefault();  
}
10
Eric

Alter Thread, den ich kenne .......

Das Problem mit der Antwort von @ryuutatsuo ist, dass es auch alle Eingaben oder andere Elemente blockiert, die auf 'Klicks' reagieren müssen (zum Beispiel Eingaben). Deshalb habe ich diese Lösung geschrieben. Diese Lösung ermöglichte es, jede vorhandene Drag & Drop-Bibliothek zu verwenden, die auf Ereignissen beim Herunterfahren, Bewegen und Mouse-Up auf einem beliebigen Touch-Gerät (oder Cumputer) basiert. Dies ist auch eine browserübergreifende Lösung.

Ich habe auf mehreren Geräten getestet und es funktioniert schnell (in Kombination mit der Drag & Drop-Funktion von ThreeDubMedia (siehe auch http://threedubmedia.com/code/event/drag )). Da es sich um eine jQuery-Lösung handelt, können Sie sie nur mit jQuery-Bibliotheken verwenden. Ich habe jQuery 1.5.1 dafür verwendet, weil einige neuere Funktionen mit IE9 und höher nicht richtig funktionieren (nicht mit neueren Versionen von jQuery getestet).

Bevor Sie eine Drag-and-Drop-Operation zu einem Ereignis hinzufügen Diese Funktion muss zuerst aufgerufen werden :

simulateTouchEvents(<object>);

Sie können auch alle Komponenten/untergeordneten Elemente für die Eingabe sperren oder die Ereignisbehandlung mithilfe der folgenden Syntax beschleunigen:

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

Hier ist der Code, den ich geschrieben habe. Ich habe ein paar nette Tricks benutzt, um die Bewertung zu beschleunigen (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 macht: Zuerst übersetzt es Single-Touch-Ereignisse in Mausereignisse. Es wird geprüft, ob ein Ereignis durch ein Element auf/in dem Element verursacht wird, das verschoben werden muss. Wenn es sich um ein Eingabeelement wie Eingabe, Textbereich usw. handelt, wird die Übersetzung übersprungen, oder wenn ein Standard-Mausereignis daran angehängt ist, wird auch eine Übersetzung übersprungen.

Ergebnis: Jedes Element in einem ziehbaren Element funktioniert noch.

Viel Spaß beim Programmieren, Gruß, Erwin Haantjes

8
Codebeat