web-dev-qa-db-ja.com

タッチスクリーンモバイルデバイスでのドラッグアンドドロップの有効化

最近Android電話を入手し、サイトのドラッグアンドドロップが機能しないことがわかりました。なぜ機能しないのか理解できますが、誰かがこれに対する解決策を見つけましたか？ m JQueryを使用してD＆Dを実装します。

jqueryandroidbrowsermobilemobile-phones
15
danwoods

私はjQueryUIタッチパンチを使用しました-これは、マウスダウン、マウスアップ機能をハッキングすることで機能し、タッチスタート、タッチエンドなどに置き換えます。

について： http://touchpunch.furf.com/

スクリプト： https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

コード：

含める：

<script src="jquery.ui.touch-punch.min.js"></script>

ヘッダーのjqueryUIスクリプトファイルの後。

32
Jonathan Tonge

上記のタッチパンチの回答を使用しましたが、うまくいきました。ただし、注意点が1つあります。私は、サイト（および上記）でgithubリンクを使用していることを発見しました：

スクリプト： https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

AndroidモバイルChromeを実行しているデバイスでは機能しませんでしたが、サイトからの生の人間が読める形式のソースは機能しました。これはこの投稿の日付の時点で、もちろん修正される可能性がありますが、それまでの間、デバッグの数サイクルを節約できる可能性があります。

3
ajl

私が知っている古いスレッド.......

ここに、ドラッグ可能な要素の「クリック」（入力など）に反応する必要のある入力またはその他の要素を尊重するソリューションがあります。このソリューションにより、任意のタッチデバイス（またはコンピューター）でのmousedown、mousemove、およびmouseupイベントに基づく既存のドラッグアンドドロップライブラリを使用できるようになりました。これもクロスブラウザソリューションです。

私はいくつかのデバイスでテストしましたが、高速に動作します（ThreeDubMediaのドラッグアンドドロップ機能と組み合わせて（ http://threedubmedia.com/code/event/drag ）も参照）。これはjQueryソリューションであるため、jQueryライブラリでのみ使用できます。一部の新しい関数はIE9以降では正しく機能しない（新しいバージョンのjQueryではテストされていない）のため、私はjQuery 1.5.1を使用しました。

前イベントにドラッグまたはドロップ操作を追加します最初にこの関数を呼び出す必要があります：

simulateTouchEvents(<object>);

次の構文を使用して、入力またはイベント処理を高速化するためにすべてのコンポーネント/子をブロックすることもできます。

simulateTouchEvents(<object>, true); // ignore events on childs

これが私が書いたコードです。私は物事の評価をスピードアップするためにいくつかの素晴らしいトリックを使用しました（コードを参照）。

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
 }

$(oo).bind('touchstart touchmove touchend', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
};

機能：最初は、シングルタッチイベントをマウスイベントに変換します。ドラッグする必要のある要素上または要素内の要素がイベントの原因であるかどうかを確認します。 input、textareaなどの入力要素の場合は翻訳をスキップします。標準のマウスイベントがアタッチされている場合は、翻訳もスキップします。

結果：ドラッグ可能な要素のすべての要素は引き続き機能します。

ハッピーコーディング、greetz、Erwin Haantjes

2
Codebeat

IPhoneには、少なくともontouchstart、ontouchendなどの特定のイベントがあります。これらはWebkitの一部ですが、Android）に関する情報はiPhoneよりもはるかに少ないです。この質問に対する答えは次のとおりです。ドラッグアンドドロップ機能では、通常使用するイベントではなく、これらのイベントを使用する必要があるか、両方を使用する必要があります。

この記事は興味深いかもしれません- http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

1
joelg

モバイル/タッチスクリーンデバイスをサポートするjQueryドラッグアンドドロッププラグインがあります。

http://plugins.jquery.com/project/mobiledraganddrop

モバイルデバイスでは、タップしてアイテムをピックアップし、タップしてドロップ場所を選択します。これにより、ドラッグアクションがデバイス/ブラウザによってハイジャックされる問題を回避できます。

0
Fenton

私のAndroidタブレットタッチスクリーン http://www.quirksmode.org/m/tests/drag.html 「ontouchstartevent」を使用する例を見つけました

0
molokoloco