Analyse der Schwierigkeit von Drag-and-Drop-Aktionen im jQuery-Mobilbrowser_jquery

In diesem Artikel wird anhand eines Beispiels die Schwierigkeit des Ziehens und Ablegens in mobilen jQuery-Browsern analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ursprünglich wollte ich einen Steuerknopf implementieren, der wie bei einem iPhone nach Belieben gezogen werden kann, aber am Ende stellte ich fest, dass alles umsonst war,

Obwohl Drag-and-Drop-Aktionen in mobilen Browsern üblich sind, ist es unmöglich, Komponenten zu implementieren, die per Drag-and-Drop in mobilen Browsern ausgeführt werden können.

Werfen wir zunächst einen Blick darauf, wie Drag-and-Drop-Aktionen auf PC-Webseiten ausgeführt werden,

Zuallererst haben wir eine Schaltfläche, die beim Klicken eine Aktion ausführt, und die Sie nach Belieben ziehen können, genau wie die Steuertaste auf dem iPhone, die Sie nach Belieben ziehen können

Es ist nicht einfach, die graue Ebene wie oben gezeigt zu schreiben,

Zuerst müssen wir das Positionsattribut der grauen Ebene in „abosulte“ ändern. Dann besteht der Hauptpunkt der im JQuery-Skript zu implementierenden Arbeit darin, das Paar aus Klick- und Mousedown-Mouseup-Aktionen zu unterscheiden, da „Click“ ist ursprünglich gleichbedeutend mit „mousedown“ und „mouseup“, aber in Ordnung. Nach einer bestimmten Zeit mit „mousedown“ löscht „unbind“ sofort die Bindung der Ebene an die Cilck-Aktion und teilt dem System mit, dass die Aktion nach „mousedown“ nichts mit dem Klicken zu tun hat. Siehe den folgenden tatsächlichen Code:

Code kopieren Der Code lautet wie folgt:

 
 
 
 
 
 
 
 
 
 

out

 
 
 

Der Grund, warum wir ein Mouseout-Ereignis schreiben müssen, ist der gleiche wie im vorherigen Artikel [JQuery implementiert ein Ereignis, das ein langes Drücken einer Taste auslöst], um zu verhindern, dass der Fehler im Browser geschwärzt wird und der Mouseup-Beurteilung entgeht .
Das Obige sieht sehr perfekt aus, da es auf allen gängigen PC-Browsern getestet wurde und perfekt mit IE8 kompatibel ist. Es ist wirklich malerisch,

Sobald es jedoch um das Mobiltelefon geht, gibt es ein großes Problem,

Nur ​​im Handy-Debugging-Modus im Google-Browser, es kann nicht verwendet werden, bevor es auf einem echten Gerät ist!

Es gibt kein Problem mit dem Klickereignis von jquery in mobilen Browsern. Das Ereignis „Langes Drücken“ steht jedoch im Widerspruch zur Rechtsklickfunktion des Systems auf dem Telefon, selbst wenn es in jquery mobile durch .on(“taphold“) ersetzt wird , function (){}); event oder e.preventDefault() zum Mousedown hinzufügen; IE verwendet window.event.preventDefault(); ich kann nur long verwenden beibehalten, und über das Ziehen muss nicht nachgedacht werden, da die Hauptfunktion des Ziehens die Mousemove-Aktion ist und mobile Browser die Mousemove()-Aktion überhaupt nicht unterstützen.

Also, jemand hat protestiert, Sie können .draggable() in der JQuery-Benutzeroberfläche und das Swipe-Ereignis in JQueryMobile verwenden, was eigentlich das Drag-Ereignis in HTML5 ist!

Allerdings sind alle oben genannten Lösungen vergeblich,

Für .draggable() in JQuery UI, das Swipe-Ereignis in JQueryMobile und das Drag-Ereignis in HTML5 können Sie den mobilen Debugging-Modus des Browsers verwenden und feststellen, dass Sie überhaupt nicht ziehen können.

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.