タッチスクリーンデバイスでのHTML5ドラッグアンドドロップAPI
ドラッグアンドドロップ用のHTML5 APIにタッチスクリーンディスプレイのサポートが含まれているかどうか、私はただ疑問に思っていました。
IPhoneのことを考えていましたが、まだサポートされていません。それがSafariモバイルでHTML5のドラッグアンドドロップをサポートするためにAppleの側で追いついているのかどうか疑問に思っていましたが、HTML5 APIはこれに対して十分に強力ではないかもしれないと思っていましたが、私はそれを強く疑っています。
標準のタッチスクリーンラップトップタブレットなどでは、テストを行うことができないので、サポートは含まれていると思います。私の知る限り、そのテーブルインターフェイスはマウスコントロールを置き換えるだけなので、 、ブラウザに関する限り、エンドユーザーは実際にはマウスを使用しています。
何かご意見は？
古いスレッドですが、いくつかの経験があり、それでも問題があるので、試してみましょう...
タッチとドラッグ/ドロップは、実際にはうまく連携しません。ドラッグアンドドロップの場合、暗黙のマウスダウン=>マウス移動=>マウスアップシーケンスのイベントがあることを考慮してください。タッチ環境では、標準のタッチスタート、タッチムーブ、タッチエンドイベントだけでなく、さまざまなプラットフォームで特定の意味を持つ実際のジェスチャーも利用できます。これらのジェスチャーは、タッチイベント、その順序、およびタイミングの組み合わせです。
では、タッチを使用して要素をどのようにドラッグしますか？タッチスタートとタッチムーブをキャプチャすることによって？いいえ。ファットフィンガーの問題により、ほとんどすべてのタッチイベントには、タッチスタートとタッチムーブの両方があります。また、2つのタッチスタートを使用して、画面が汚れている場合にタッチムーブを1つだけにすることもできます。
タッチスタートをキャプチャしてから、ユーザーが特定の距離を移動したかどうかを確認してみませんか？いいえ、問題は、ユーザーが指を15ピクセル（または任意の距離）動かしたときに「グリッチ」が表示され、何も起こらず、要素が突然指の位置にスナップすることです。通常の反応は、指を離すことです。このシナリオでは、ドロップを開始しますが、これは間違った答えです。
結局のところ、一部の要素が静止していて、他の要素は静止可能である必要はないインターフェイスを開発しようとすると、ドラッグ可能とは、デスクトップ環境をタッチデバイスに適合させようとすることです。パラダイムは適合しません。
さまざまなタッチフレームワークを確認し、組み込みのジェスチャーを使用することをお勧めします。
WebKit（Chrome＆Safari）で動作するネイティブHTML5イベントがいくつかあります。モバイルバージョンのみです。これらのイベントの名前は、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});
});
詳細： https://developer.Apple.com/documentation/webkitjs/touchevent
ところで、私はwebkit-transform（CSSプロパティ）を使用することを好んでいます。
同じ問題があるため、ここにfreeソリューションをいくつか示します。