HTML5在觸摸屏設備上拖放API

Question

我只是想知道拖放的HTML5 API是否包含對觸摸屏顯示的支持。

我在想iPhone，但我知道這還不支持。我在想，如果這只是趕上蘋果，支持HTML5拖放到Safari移動，但我也想到也許HTML5 API不夠強大，但我非常懷疑這一點。

如何在標準的觸摸屏筆記本電腦平板電腦或類似的，我沒有一個，所以我不能測試，但我會想象，包括支持，因爲，據我所知，該表接口只是取代鼠標控制，因此，就瀏覽器而言，最終用戶實際上只是使用鼠標。

有什麼想法？

Answer 1

在WebKit中有一些本地HTML5事件（Chrome & Safari）......僅限移動版本。 這些活動的名稱是touchstart，touchmove，touchend，touchcancel

一個例子移動元素是：

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

的更多信息：http://developer.apple.com/safari/library/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html#//apple_ref/javascript/cl/TouchEvent

BTW，我更喜歡一起工作WebKit的變換（CSS屬性），因爲它有更好的性能。

好運

Answer 2

舊線，但因爲我已經有了一些經驗，它仍然是一個問題，我給它一個鏡頭...

觸摸和拖/放沒有真正發揮很好一起。考慮到對於拖放，您有一個隱含的鼠標移動=>鼠標移動=>鼠標移動事件序列。在觸摸環境中，您不僅具有標準的touchstart，touchmove和touchend事件，而且您還擁有在各種平臺上具有特定含義的實際手勢。這些手勢是觸摸事件的組合，它們的順序和時間。

那麼你將如何拖動一個元素使用觸摸？通過捕捉touchstart和touchmove？沒有。由於胖手指問題，幾乎所有的觸摸事件都有觸發和觸摸移動。你也可以有兩個觸摸屏，偶爾只有一個touchmove，並且屏幕很髒。

如何捕獲touchstart，然後等待查看用戶是否移動了一定距離？不，問題在於當用戶將手指移動15個像素（或任何距離）並且沒有任何事情發生時，用戶將看到「毛刺」，然後該元素突然對齊他的手指位置。正常的反應是擡起手指，在這種情況下，將啓動一個下降，錯誤的答案。最後，試圖開發一個界面，其中一些元素是固定的，而其他元素可以但不一定是可拖動的，嘗試將桌面環境適合觸摸設備。範例不適合。

更好地查看各種觸摸框架並使用內置手勢。

Answer 3

有同樣的問題，這裏有一對夫婦的免費解決方案：

http://touchpunch.furf.com/

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