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

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

Ich möchte ähnliche Funktionen 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 auf Droppability zu aktualisieren, es läuft bereits auf Andriod und IOS.

Vielen Dank!

Sie können die Jquery-Benutzeroberfläche zum Ziehen und Ablegen mit einer zusätzlichen Bibliothek verwenden, die Mausereignisse in Berührung übersetzt. Dies ist die Bibliothek, die ich empfehle: https://github.com/furf/jquery-ui-touch-punch , with Dies sollte Ihr 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 rufen Sie in Ihrem Dokument bereits die Funktion init () auf

Code von hier gefunden

Für alle, die dies nutzen und die Klickfunktion beibehalten möchten (wie John Landheer in seinem Kommentar erwähnt), können Sie dies mit nur wenigen Änderungen tun:

Fügen Sie ein paar Globale hinzu:

var clickms = 100;
var lastTouchDown = -1;

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

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;
}

Vielleicht möchten Sie 'clickms' an Ihren Geschmack anpassen. Im Grunde ist es nur ein "Touchstart", gefolgt von einem "Touchend", um einen Klick zu simulieren.

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

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

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();  
}

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), also habe ich diese Lösung geschrieben. Diese Lösung ermöglichte die Verwendung jeder vorhandenen Drag & Drop-Bibliothek, die auf Mousedown-, Mousemove- und Mouseup-Ereignissen auf jedem 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, da einige neuere Funktionen mit IE9 und höher nicht ordnungsgemäß funktionieren (nicht mit neueren Versionen von jQuery getestet).

Bevor Sie einem Ereignis eine Drag & Drop- Operation hinzufügen , müssen Sie zuerst diese Funktion aufrufen :

simulateTouchEvents(<object>);

Sie können auch alle Komponenten / untergeordneten Elemente für die Eingabe blockieren oder die Ereignisbehandlung beschleunigen, indem Sie die folgende Syntax verwenden:

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 tut: Zuerst übersetzt es einzelne Berührungsereignisse in Mausereignisse. Es wird geprüft, ob ein Ereignis durch ein Element auf / in dem Element verursacht wird, das herumgezogen 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 Codieren, Greetz, Erwin Haantjes