web-dev-qa-db-ja.com

タッチデバイスでのドラッグアンドドロップ

タッチアプリが「ドラッグアンドドロップ」（dnd）イディオムを使用することはめったになく、ドラッグではほとんどの場合、スクロールに使用されます。

これには理由がありますか？ dnd on touchを使用するのは紛らわしいですか、それとも「間違っています」か。スクロールが必要な場所についてはどうですか：それらを効果的に混合できますか？

touch-screenscrollingdrag-n-drop
9
aaaidan

それにはいくつかの理由があると思います。

  1. 何よりもまず、すでにスクロールを実装している場合は、注意が必要です。それは可能ですが、一方向（たとえば、垂直方向）にスクロールし、反対方向を使用してリストから項目を「切り離す」ことができるリストのようなソリューションが必要です。その後、任意の場所にドラッグできます。方向。これは、実行する、学ぶ、または（ここではトピックから外れている）実装する簡単なアクションではありません。
  2. タッチインターフェイスの多くは、小さな画面を対象としています。ドラッグアンドドロップは、通常、それらの画面では意味がありません。通常、アイテムをドラッグアンドドロップできる2つ以上のアイテムのコンテナーを表示することによって機能します。ただし、これらの小さな画面は通常、常にこのようなコンテナが表示されるoneのみになるように設計されています。それでも、タブレットや他の大画面タッチ対応システムでは、それを使用できます。
7
André

言及されていないもう1つの側面は、ドラッグアンドドロップフィールドを使用することによる長押し機能の損失です。特にAndroidでは、長押しがタッチの世界の右クリックを表すようになりました。マウスが左右にある場合、タッチは短いと長いだけです。

3
Will Meldon

ドラッグアンドドロップまたはtouchHold時にevent.preventDefaultを使用して、スクロールとドラッグ/ドロップの両方を行うことができます。

トリックは、マウスイベントをタッチイベントにバインドすることです。

https://mobiforge.com/design-development/touch-friendly-drag-and-drop

ダブルタップはトリッキーですが、完全に実行可能です。これが私にとってうまくいったものです。

https://Gist.github.com/attenzione/7098476

ダブルクリックイベントを使用する場合は、ダブルタップイベントを追加するだけです。

この方法では、ダブルタップ、ドラッグ/ドロップを使用して、touchHoldやドラッグアンドドロップではないときにスクロールを有効にできます。

更新：.draggable要素がある場合、scrollオプションのscroll：trueを使用すると、ドラッグして自動スクロールを簡単に開始できます。

例：

$('.className').draggable({
                helper: 'clone',
                scroll: true 
            });
0
Dmitri Larionov