web-dev-qa-db-ja.com

モバイルデバイスでのHTMLドラッグアンドドロップ

JQuery UIのドラッグ可能およびドロップ可能などのJavaScriptを使用してWebページにドラッグアンドドロップを追加する場合、モバイルデバイスのブラウザーで表示するときにこれをどのように動作させるか-ドラッグのためのタッチスクリーンアクションはページなどをスクロールするための電話？

すべてのソリューションを歓迎します...私の最初の考えは：

  1. モバイルデバイス用のボタンを使用して、ドラッグするアイテムを「持ち上げ」、アイテムをドロップするゾーンをクリックするようにします。

  2. モバイルデバイス用にこれを行うアプリを作成するのではなく、モバイルページで動作するWebページを取得してみてください。

  3. あなたの提案やコメントをお願いします。

javascripthtmljquery-uimobile-devices
83
Fenton

jQuery UI Touch Punchがすべてを解決します。

JQuery UIのタッチイベントサポートです。基本的に、タッチイベントをjQuery UIにワイヤリングするだけです。 iPad、iPhone、Androidおよびその他のタッチ対応モバイルデバイスでテスト済み。ソート可能なjQuery UIを使用しましたが、これは魅力のように機能します。

http://touchpunch.furf.com/

98
vichsu

HTML5ドラッグアンドドロップがモバイルで利用できるように、タッチイベントをドラッグアンドドロップに変換するための新しいポリフィルがあります。

ポリフィルは この投稿 でBernardo Castilhoによって導入されました。

これが デモ の投稿です。

この投稿では、フォリフィル設計に関するいくつかの考慮事項も示しています。

21
remdevtec

デスクトップ、モバイル、Windows Phoneを含むタブレットで動作するドラッグアンドドロップ+回転を作成する必要がありました。最後のものは、それをより複雑にしました（mspointer vs. touchイベント）。

ソリューションは、素晴らしい Greensockライブラリ から生まれました。

同じオブジェクトをドラッグ可能かつ回転可能にするためにフープをいくつかジャンプする必要がありましたが、完全に機能します

7
Tomer Almog

Sencha Touch のベータ版では、ドラッグアンドドロップがサポートされています。

DnD Example を参照できます。これは、Webkitブラウザーでのみ機能します。

そのロジックをWebページに後付けするのはおそらく難しいでしょう。私が理解しているように、彼らはすべてのブラウザのパンを無効にし、パンニングイベントを完全にjavascriptで実装し、ドラッグアンドドロップの正しい解釈を可能にします。

更新：元のリンク例は死んでいますが、私はこの代替案を見つけました：
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

7
Joeri Sebrechts

Tim Ruffleのdrag-n-drop polyfill を試してみることもできます。Bernardo Castilhoの1つ（@remdevtecの回答を参照）。

単純にnpm install mobile-drag-drop --saveを実行します（他のインストール方法、たとえばbowerを使用）

次に、タッチ検出に依存する要素インターフェースはすべてモバイルで動作するはずです（たとえば、スクロールとドラッグを同時に行うのではなく、要素のみをドラッグします）。

1
Frosty Z

Jquery Touch Punchは優れていますが、ドラッグ可能なdivのすべてのコントロールを無効にして、これを防ぐために行を変更する必要があります...（執筆時-行75）

変化する

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

読む

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

「ロック解除」する各要素に必要な数のorsを追加します

誰かを助けることを願っています

1
tedbaker

Sortable JSライブラリ はタッチスクリーンと互換性があり、jQueryを必要としません。

タッチスクリーンを処理する方法では、アイテムのドラッグを開始するために約1秒間スクリーンに触れる必要があります。

また、このライブラリがJQuery UI Sortableよりも高速に実行されることを示すビデオテストを提示します。

0
Zoup

ここに私の解決策があります：

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});
0
Alper Aydingül