最近 Android フォンを手に入れたのですが、自分のサイトでドラッグ アンド ドロップが機能しないことがわかりました。なぜそうならないのか理解していますが、これに対する解決策を見つけた人はいますか？D＆Dを実装するためにJQueryを使用しています...
34624 次
6 に答える
32
jQuery UI タッチ パンチを使用しました。これは、マウスダウン、マウスアップ機能をハッキングすることで機能し、それらを touchstart、touchend などに置き換えます。
について: 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>
ヘッダーのjquery UIスクリプトファイルの後に。
于 2012-10-02T18:57:58.607 に答える
3
上記のタッチパンチの回答を使用しましたが、うまくいきました。ただし、1 つ注意事項があります。サイト（および上記）のgithubリンクを使用することがわかりました：
スクリプト: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js
モバイル Chrome を実行している Android デバイスでは機能しませんでしたが、人間が読める生のサイトのソースは機能しました。これはこの投稿の日付の時点でのものであり、もちろん修正される可能性がありますが、それまでの間、デバッグの数サイクルを節約できるかもしれません.
于 2014-02-22T16:31:56.623 に答える
2
私が知っている古いスレッド.......
ここでは、ドラッグ可能な要素の「クリック」（入力など）に反応する必要がある入力またはその他の要素を尊重するソリューションを用意しています。このソリューションにより、任意のタッチ デバイス (またはコンピュータ) で 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 などの入力要素の場合は翻訳をスキップします。標準のマウス イベントが関連付けられている場合も翻訳をスキップします。
結果: ドラッグ可能な要素のすべての要素は引き続き機能します。
ハッピーコーディング、挨拶、Erwin Haantjes
于 2012-09-24T02:27:14.733 に答える
1
iPhone には、少なくとも ontouchstart、ontouchend などの特定のイベントがあります。これらは Webkit の一部ですが、Android に関する情報は iPhone よりはるかに少ないです。この質問に対する答えは、ドラッグ アンド ドロップ機能は、通常使用するイベントではなく、これらのイベントを使用する必要があるか、または両方を使用する必要があるということだと思います。
この記事は興味深いかもしれません - http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html
于 2010-02-08T13:31:08.753 に答える
0
モバイル/タッチスクリーンデバイスをサポートするjQueryドラッグアンドドロッププラグインがあります。
http://plugins.jquery.com/project/mobiledraganddrop
モバイルデバイスでは、タップしてアイテムをピックアップし、タップしてドロップ場所を選択します。これは、デバイス/ブラウザによってハイジャックされるドラッグアクションの問題を回避します。
于 2011-02-21T13:26:00.310 に答える
0
Androidタブレットのタッチスクリーンで動作する例を見つけました http://www.quirksmode.org/m/tests/drag.html「ontouchstartevent 」を使用しています
于 2012-01-17T10:19:06.697 に答える