Interfejs API przeciągania i upuszczania HTML5 na urządzeniach z ekranem dotykowym

Question

Zastanawiam się tylko, czy interfejs API HTML5 do przeciągania i upuszczania zawiera obsługę ekranów dotykowych.

Myślałem o iPhonie, ale wiem, że to nie jest jeszcze obsługiwane. Zastanawiam się, czy to jest po prostu nadrabianie zaległości ze strony Apple, aby wesprzeć przeciąganie i upuszczanie HTML5 na urządzeniach mobilnych Safari, ale pomyślałem też, że API HTML5 nie jest na to wystarczająco wydajny, ale bardzo w to wątpię.

Co powiesz na standardowy tablet z ekranem dotykowym lub podobnym, nie mam takiego, więc nie mogę go przetestować, ale wyobrażam sobie, że wsparcie jest włączone, ponieważ, o ile mi wiadomo, ten interfejs tabeli po prostu zastępuje sterowanie myszą, więc jeśli chodzi o przeglądarkę, użytkownik końcowy naprawdę używa myszy.

Jakieś myśli?

Answer 1

Istnieje kilka rodzimych HTML5 Zdarzenia, które działa w WebKit (Safari) Chrome & ... tylko wersje mobilne. Nazwa tych wydarzeń są touchstart, touchmove, touchend, touchcancel

Przykładem przenieść element jest:

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

Więcej informacji: http://developer.apple.com/safari/library/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html#//apple_ref/javascript/cl/TouchEvent

BTW Wolę pracować z WebKit-transform (Właściwości CSS), ponieważ ma lepszą wydajność.

Powodzenia

Answer 2

stary wątek, ale ponieważ mam pewne doświadczenie i nadal jest problemem dam mu szansę ...

Dotknij i przeciągnij/upuść naprawdę nie grać ładnie razem. Należy wziąć pod uwagę, że w przypadku przeciągania i upuszczania istnieje domyślna sekwencja zdarzeń z myszką w dół => mysz-ruch => myszy. W środowisku dotykowym masz nie tylko standardowe zdarzenia dotykowe, dotykowe i touchend, ale także masz rzeczywiste gesty, które mają określone znaczenie na różnych platformach. Gesty te są kombinacjami zdarzeń dotykowych, ich kolejności i czasu.

Jak przeciągnąć element za pomocą dotyku? Przez przechwytywanie touchstart i touchmove? Nie. Ze względu na problem z grubym palcem prawie każde zdarzenie dotykowe ma zarówno dotykowy, jak i dotykowy ruch. Możesz również mieć dwa punkty dotykowe z tylko jednym dotknięciem dotykowym od czasu do czasu z brudnym ekranem.

Jak o uchwycenie touchstart a następnie czeka, aby zobaczyć, czy użytkownik został przeniesiony pewien dystans? Nie, problem polega na tym, że użytkownik zobaczy "usterkę", gdy przesunie palec o 15 pikseli (lub jakąkolwiek odległość) i nic się nie dzieje, a następnie element nagle zaskoczy na pozycję palca. Normalną reakcją jest podniesienie palca, który w tym scenariuszu zainicjowałby spadek, złą odpowiedź.

Ostatecznie, próbując stworzyć interfejs, w którym niektóre elementy są nieruchome, a inne mogą, ale nie muszą, przeciągalne próbuje dopasować środowisko pulpitu do urządzenia dotykowego. Te paradygmaty nie pasują.

Lepiej patrzeć na różnych ram dotykowych i korzystać z wbudowanych gesty.

Answer 3

ten sam problem, oto kilka wolnych rozwiązań:

http://touchpunch.furf.com/

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