7

Jquery UIのドラッグアンドドロップ（http://jqueryui.com/demos/draggable ）をhttps://github.com/furf/jquery-ui-touch-punchと一緒に使用し て、タッチイベントをマウスイベントにマッピングしています。これまでのところ、ドラッグアンドドロップ全体が正常に機能しています。

私が今抱えている問題は、ドラッグ可能な要素の長いリストがあり、IPadでもリストをスクロールできるようにする必要があることです...リスト要素をドラッグ可能にすると、これは機能しなくなります。

and-のようなjqueryuiが提供する制約を使用してみましたがdistance、delay それでも、scrollイベントは完全に無効になっている/dragイベントでオーバーレイされているようです。

おそらく、「左に50ピクセル以上移動してドラッグ可能にする場合のみ」などのカスタム関数を作成する必要があります。

誰かが同様の問題に遭遇したことがあり、それについての考えを共有することをいとわないでしょうか？SenchaやJQmobileのような他のモバイルWebフレームワークにそのような機能が備わっていますか？

前もって感謝します...

4

2 に答える 2

4

もちろんデザインにもよりますが、ハンドルを使ってみるのもいいでしょう。

jQueryUIのドキュメントの例を次に示します。

<div id="draggable" class="ui-widget-content">
    <p class="ui-widget-header">drag with handle</p>
</div>
<div id="draggable2" class="ui-widget-content">
    <p>drag from content</p>
    <p class="ui-widget-header">not drag with handle</p>
</div>

$("#draggable").draggable({handle:"p"});
$("#draggable2").draggable({cancel:"p.ui-widget-header"});

または、少なくともオプションのキャンセルで開始できます。

http://jsfiddle.net/Dn9DX/

于 2012-08-16T13:08:23.827 に答える
3

https://github.com/furf/jquery-ui-touch-punch からこのソリューションのコードに切り替えることでこれを解決しました： Javascriptタッチデバイスのドラッグアンドドロップ。

結局、調整する必要があるのは、event.preventDefault();scollingを再度有効にするためにを削除することだけでした。

編集

基本的に、リンクした2番目の回答のコードをいくつか調整して使用しました。これが私のソリューションのJSフィドルです。それが役立つことを願っています：http：//jsfiddle.net/LQuyr/8/

于 2012-08-17T09:18:30.070 に答える