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

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

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

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

2. モバイルデバイスでこれを行うアプリを作成して、Webページを動作させることはしないでください！

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

jQuery UI Touch Punchはそれをすべて解決します。

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

http://touchpunch.furf.com/

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

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

これがその投稿のデモです。

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

Sencha Touchのベータ版はドラッグアンドドロップをサポートしています。

DnDの例を参照できます。ちなみに、これはWebkitブラウザでのみ機能します。

そのロジックをWebページに組み込むのはおそらく難しいでしょう。私が理解しているように、ブラウザのすべてのパンを無効にし、パンイベントを完全にJavaScriptで実装しているため、ドラッグアンドドロップを正しく解釈できます。

更新：元のサンプルリンクは無効ですが、この代替案を見つけました：https :
//github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

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

解決策は、すばらしいGreensockライブラリから来ました

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

Tim Ruffleのドラッグアンドドロップポリフィルも試してみるとよいでしょう。確かにBernardo Castilho のドラッグと似ています（@remdevtecの回答を参照）。

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

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

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') {

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

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

これが私の解決策です：

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

ソート可能なJSライブラリは、タッチスクリーンとの互換性があるとjQueryを必要としません。

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

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