JQuery UIのドラッグ可能およびドロップ可能などのJavaScriptを使用してWebページにドラッグアンドドロップを追加する場合、モバイルデバイスのブラウザーで表示するときにこれをどのように動作させるか-ドラッグのためのタッチスクリーンアクションはページなどをスクロールするための電話?
すべてのソリューションを歓迎します...私の最初の考えは:
モバイルデバイス用のボタンを使用して、ドラッグするアイテムを「持ち上げ」、アイテムをドロップするゾーンをクリックするようにします。
モバイルデバイス用にこれを行うアプリを作成するのではなく、モバイルページで動作するWebページを取得してみてください。
あなたの提案やコメントをお願いします。
jQuery UI Touch Punchがすべてを解決します。
JQuery UIのタッチイベントサポートです。基本的に、タッチイベントをjQuery UIにワイヤリングするだけです。 iPad、iPhone、Androidおよびその他のタッチ対応モバイルデバイスでテスト済み。ソート可能なjQuery UIを使用しましたが、これは魅力のように機能します。
デスクトップ、モバイル、Windows Phoneを含むタブレットで動作するドラッグアンドドロップ+回転を作成する必要がありました。最後のものは、それをより複雑にしました(mspointer vs. touchイベント)。
ソリューションは、素晴らしい Greensockライブラリ から生まれました。
同じオブジェクトをドラッグ可能かつ回転可能にするためにフープをいくつかジャンプする必要がありましたが、完全に機能します
Sencha Touch のベータ版では、ドラッグアンドドロップがサポートされています。
DnD Example を参照できます。これは、Webkitブラウザーでのみ機能します。
そのロジックをWebページに後付けするのはおそらく難しいでしょう。私が理解しているように、彼らはすべてのブラウザのパンを無効にし、パンニングイベントを完全にjavascriptで実装し、ドラッグアンドドロップの正しい解釈を可能にします。
更新:元のリンク例は死んでいますが、私はこの代替案を見つけました:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch
Tim Ruffleのdrag-n-drop polyfill を試してみることもできます。Bernardo Castilhoの1つ(@remdevtecの回答を参照)。
単純にnpm install mobile-drag-drop --save
を実行します(他のインストール方法、たとえばbowerを使用)
次に、タッチ検出に依存する要素インターフェースはすべてモバイルで動作するはずです(たとえば、スクロールとドラッグを同時に行うのではなく、要素のみをドラッグします)。
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を追加します
誰かを助けることを願っています
Sortable JSライブラリ はタッチスクリーンと互換性があり、jQueryを必要としません。
タッチスクリーンを処理する方法では、アイテムのドラッグを開始するために約1秒間スクリーンに触れる必要があります。
また、このライブラリがJQuery UI Sortableよりも高速に実行されることを示すビデオテストを提示します。
ここに私の解決策があります:
$(el).on('touchstart', function(e) {
var link = $(e.target.parentNode).closest('a')
if(link.length > 0) {
window.location.href = link.attr('href');
}
});