ドラッグ アンド ドロップ用の HTML5 API にタッチ スクリーン ディスプレイのサポートが含まれているかどうか疑問に思っていました。
iPhone を考えていましたが、これはまだサポートされていません。Safari モバイルで HTML5 のドラッグ アンド ドロップをサポートするために、Apple の側に追いついているだけなのだろうかと思っていましたが、HTML5 API がこれには十分に強力ではないのではないかと考えていましたが、それは非常に疑わしいです。
標準のタッチ スクリーン ラップトップ タブレットなどではどうでしょうか。私は持っていないのでテストできませんが、私が知る限り、そのテーブル インターフェイスはマウス コントロールを置き換えるだけなので、サポートが含まれていると思います。 、ブラウザーに関する限り、エンドユーザーは実際にはマウスを使用しているだけです。
何かご意見は？
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 プロパティ) を使用することを好みます。
古いスレッドですが、経験があり、まだ問題があるので、試してみます...
タッチとドラッグ アンド ドロップは、実際にはうまく連携しません。ドラッグ アンド ドロップの場合、暗黙的なマウス ダウン => マウス移動 => マウス アップ シーケンスのイベントがあることを考慮してください。タッチ環境では、標準の touchstart、touchmove、および touchend イベントだけでなく、さまざまなプラットフォームで特定の意味を持つ実際のジェスチャもあります。これらのジェスチャは、タッチ イベント、その順序、およびタイミングの組み合わせです。
では、タッチを使用して要素をドラッグするにはどうすればよいでしょうか。タッチスタートとタッチムーブをキャプチャすることによって？いいえ。太い指の問題により、ほとんどすべてのタッチ イベントに touchstart と touchmove の両方があります。画面が汚れていると、1回のタッチムーブだけで2回のタッチスタートをすることもあります。
タッチスタートをキャプチャしてから、ユーザーが一定の距離を移動したかどうかを確認するのはどうですか? いいえ、問題は、ユーザーが指を 15 ピクセル (または任意の距離) 移動したときに「グリッチ」が表示され、何も起こらず、要素が突然指の位置にスナップすることです。通常の反応は指を離すことですが、このシナリオではドロップを開始しますが、これは間違った答えです。
最終的に、いくつかの要素が静止していて、他の要素が固定されているが、そうでなくてもよいインターフェースを開発しようとすることは、デスクトップ環境をタッチ デバイスに適合させようとすることです。パラダイムは適合しません。
さまざまなタッチ フレームワークを調べて、組み込みのジェスチャを使用することをお勧めします。
同じ問題があるため、いくつかの無料の解決策を次に示します。