99

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

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

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

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

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

4

9 に答える 9

102

jQuery UITouchPunchはそれをすべて解決します。

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

http://touchpunch.furf.com/

于 2012-05-11T16:56:04.613 に答える
9

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

解決策は素晴らしいGreensock ライブラリから来ました

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

于 2014-08-02T06:48:03.113 に答える
7

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

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

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

更新:元の例のリンクは無効になっていますが、別の方法を見つけました:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

于 2010-07-07T10:17:42.783 に答える
2

here is my solution:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});
于 2017-08-09T08:07:39.710 に答える
1

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 を追加します

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

于 2017-05-04T09:49:11.740 に答える