HTML5 Drag & Drop API auf Touch-Screen-Geräten

Question

Ich habe mich nur gefragt, ob die HTML5-API für Drag and Drop Unterstützung für Touchscreen-Displays enthalten.

Ich dachte an das iPhone, aber ich weiß, dass dies noch nicht unterstützt wird. Ich habe mich gefragt, ob das nur von Seiten von Apple aufgegriffen wird, um HTML5 Drag and Drop auf Safari Mobile zu unterstützen, aber ich dachte auch, dass die HTML5-API dafür nicht mächtig genug ist, aber ich bezweifle das sehr.

Wie wäre es mit einem Standard-Touchscreen Laptop Tablet oder dergleichen, ich habe keine, also kann ich nicht testen, aber ich würde mir vorstellen, dass Unterstützung enthalten ist, weil, soweit ich weiß, diese Tabellenschnittstelle nur ersetzt Maussteuerung, so weit wie der Browser betroffen ist, verwendet der Endbenutzer wirklich nur eine Maus.

Irgendwelche Gedanken?

Answer 1

Es gibt einige native HTML5-Ereignisse, die in WebKit (Chrome & Safari) funktioniert ... nur mobile Versionen. Der Name dieser Ereignisse sind Berührungsstart, Berührungsbewegungs, touchend, touchcancel

Ein Beispiel ein Element zu bewegen ist:

$(document).bind("touchstart", function(e) { 
e.preventDefault(); 
var orig = e.originalEvent; 
var x = orig.changedTouches[0].pageX; 
var y = orig.changedTouches[0].pageY; 

$("#element").css({top: y, left: x}); 
}); 

Weitere Informationen: http://developer.apple.com/safari/library/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html#//apple_ref/javascript/cl/TouchEvent

BTW ziehe ich die Arbeit mit Webkit-Transformation (CSS-Eigenschaften), weil es eine bessere Leistung hat.

Viel Glück

Answer 2

Alt Faden, aber da habe ich etwas Erfahrung habe, und es ist immer noch ein Problem, das ich ihm einen Schuss geben werde ...

Touch and Drag/Drop nicht wirklich schön spielen zusammen. Berücksichtigen Sie, dass Sie beim Ziehen und Ablegen eine implizierte Maus-Ab = = Maus-Bewegung => Mouse-Up-Sequenz von Ereignissen haben. In einer Touch-Umgebung haben Sie nicht nur die standardmäßigen Touchstart-, Touchmove- und Touchend-Ereignisse, sondern auch tatsächliche Gesten, die auf verschiedenen Plattformen spezifische Bedeutungen haben. Diese Gesten sind Kombinationen von Berührungsereignissen, ihrer Reihenfolge und ihres Timings.

Also, wie würden Sie ein Element mit Touch ziehen? Indem Sie TouchStart und TouchMove erfassen? Nein. Aufgrund des Fat-Finger-Problems hat fast jedes Berührungsereignis einen Touchstart und Touchmove. Sie können auch zwei Touchstarts mit nur einer Berührung haben, die Sie gelegentlich mit einem schmutzigen Bildschirm bewegen.

Wie wäre es, den Touchstart zu erfassen und dann zu warten, um zu sehen, ob der Benutzer eine bestimmte Entfernung zurückgelegt hat? Nein, das Problem ist, dass der Benutzer den "Glitch" sieht, wenn er seinen Finger 15 Pixel (oder irgendeinen Abstand) bewegt hat und nichts passiert und dann das Element plötzlich an seiner Fingerposition einrastet. Die normale Reaktion besteht darin, den Finger anzuheben, was in diesem Szenario einen Tropfen auslösen würde, die falsche Antwort.

Am Ende versucht man, eine Oberfläche zu entwickeln, in der einige Elemente stationär sind und andere, aber nicht ziehbar sein müssen, um eine Desktop-Umgebung in ein Touch-Gerät zu integrieren. Die Paradigmen passen nicht.

Es ist besser, die verschiedenen Touch-Frameworks zu betrachten und die integrierten Gesten zu verwenden.

Answer 3

das gleiche Problem, hier sind ein paar frei Lösungen:

http://touchpunch.furf.com/

http://www.createjs.com/#!/EaselJS/demos/dragdrop