問題タブ [jquery-ui-touch-punch]

iPadでドラッグできるようにするためにjqueryタッチパンチ拡張機能を使い始めていますが、すぐにつまずきます。おそらく私の側では何かひどくばかげています。開発者からのドラッグ可能な例は、私の ipad で正常に動作します。

http://furf.com/exp/touch-punch/draggable.html

これは私のデスクトップ ブラウザでは問題なく動作しますが、iPad では、ブロックに焦点を合わせ、ドラッグするとページ全体がスクロールされます。これはiPadのjquery/uiで通常起こることなので、サイトから「パンチ」コードをロードしていないか無視していると思います（ただし、同じパスを介してサイトでjqueryファイルをホストすると、それらはロードされますデスクトップブラウザでは正常に機能します）。これが非常に基本的なコード全体です。

何が足りないの?!

Touch Punch (http://touchpunch.furf.com) で jQuery UI スライダーを使用しているので、タッチ モバイル デバイスで動作します。スライダーは、位置が上部に固定されているヘッダーにあります。ヘッダーの下のコンテンツは固定されておらず、上にスクロールするとヘッダーの下にスクロールします。デスクトップでは問題なく動作しますが、iPhone でテストしたところ、上にスクロールし始めるとスライダー ハンドルをドラッグできませんでした。

ハンドルのクリック/タッチイベントではなく、スクロールイベントを実行していると思います。

周りを見回した後、これを追加して #top div のスクロールを無効にしようとしました:

しかし、クラス .pics の下にある div をまだ取得しているので、それは機能しないと思いますか?

私が意味をなさない、または明らかなことを見逃している場合は、あなたが与えることができる助けに感謝し、謝罪してください!

私のアプリケーションでは、モバイル デバイスにも実装したいドラッグ アンド ドロップを使用しています。私は次のようにJQuery Uiタッチパンチを使用することを考えていました:

問題は、私の画像がページ全体ではなく、親のスコープ内でのみドラッグされることです (添付の画像を参照)。封じ込めオプションを変更してみましたが、問題は別の場所にあるようです。

CSS:

Javascript:

ドラッグ可能な div はタッチ デバイスでドラッグ可能になりますが、移動を開始すると奇妙な位置に「ちらつき」ます。デスクトップ デバイスでは魅力的に機能しますが、iPad や Android では機能しません。

解決策の提案はありますか?

前もって感謝します！

デスクトップ デバイスで完全に動作するコードがあります。

HTML:

JS:

短いコメント: 私のドラッグ アンド ドロップは x 軸でのみ機能します。

残念ながら、DnD はどのモバイルでも動作しません :(

何かご意見は？

ページをスクロールすると、現在ドラッグされているドラッグ可能アイテムは同じ位置に留まります。これにより、指がドラッグ可能要素の上になくなります。ドラッグ可能な機能を削除せずに、ドラッグ可能な位置を現在のタッチ位置に更新する方法はありますか?

スクロールに iScrolls scrollTo メソッドを使用し、タッチ サポートに jQuery-Ui-Touch Punch を使用すると、私のセットアップはかなり複雑になりますが、これは、ドラッグ可能およびタッチ/クリックの位置の不一致の他のケースにも適用されるはずです。

私は現在、ラインアップや特定の戦術を表示するためにプレイヤーを装った div をドラッグする、一種のオンライン コーチ戦術ボードを作ろうとしています。ドラッグにTouch Punchを使用していますが、PC、タブレット、スマートフォン (最後の 2 つがターゲット プラットフォーム) でうまく機能します。

私が今試して実装したいのは、ボタンを押すと、ドラッグされたプレーヤーの後に軌跡に線が描画され始めるため、特定のプレーヤーがどのように実行されるかのパターンです。つまり、最初にプレーヤーを開始位置に配置し、次にボタンでライン トレイルを開始し、それが表示されるようにランニング パターン内でドラッグし始めます。

私は現在、線の描画を で行ってい<canvas>ますが、それはプレーヤーのドラッグとは別に線をドラッグすることを意味し、特にタッチスクリーン。

これが可能かどうかは誰にもわかりますか？

タッチ パンチを使用して、jquery のスライダーを iPad で動作させました。しかし、それは私が与えた場合にのみ機能します:

そして、使用しようとすると機能しません-

jquery-ui.js はhttp://code.jquery.com/ui/1.10.4/jquery-ui.jsからダウンロードしたファイルです。