1

Windows 7.5 電話でドラッグ アンド ドロップ機能を動作させようとしています。最初に、Windows 7.5 を除くすべてのブラウザーで機能する jquery ui draggable を使用してみました。後でさらに調べてみると、ウィンドウには touchstart、touchend、および touchmove イベントがないことがわかりました。だから私は、衝撃的に発生していたmousedown、mousemoveイベントを使用して動作させようとしました。しかし、それらは適切な順序で発砲しません。(mousemove は、mousedown の前に発生します)。また、dragstart および dragend イベントも機能しませんでした。これを機能させる必要があります。何か提案はありますか ？

/*Eg1:does not work*/
$("#draggable").draggable(); 

/*Eg2:This event does not fire*/
 $("#draggable").bind("touchstart touchmove touchend", function(){
alert("touch events supported");})

/*Eg3: In this case, mousemove fires before mousedown.*/
$("#draggable").bind("mousedown", function(){
alert("mousedown");});

$("#draggable").bind("mousemove", function(){
alert("mousemove");});
4

1 に答える 1

1

私は IE 10 を使用する Windows Phone 8 で Javascript を使用した経験しかありませんが (WP7.5 および WP7.8 の IE 9 とは対照的に)、私のアプローチを試してみてください。

WP8 (IE10) では、Microsoft は、およびイベントの代わりにpointerイベントをサポートしています。これらを使用して、機能するかどうかを確認してください。MSPointerUp MSPointerMove MSPointerDowntouchstarttouchmovetouchend

しかし、私が作成した例では、IE 10 が標準のマウス イベント ( ) を喜んで使用し、ある程度うまく機能したため、これらの独自のイベントを使用する必要さえありませんでした。イベントの順序に問題はありませんでした（質問で述べたように）。ドラッグ中に発生した主な問題は、イベントが (ブラウザーによって) トリガーされなくなり、代わりにブラウザーがページのパンを開始し、ドラッグした要素がリンボ状態 (いいえまたはトリガー) のままになることでした。ページのパンを妨げなかったので、使用しても役に立ちませんでした。この問題を解決するために、Microsoft のタッチ イベントに関するドキュメントを調べたところ、この CSS 行に出会いました。mouseup mousemove mousedownmousemovemousemovemouseupevent.preventDefault()

-ms-touch-action: none;

ドラッグする要素にこれを適用すると、問題は解決しました。上記の独自の CSS プロパティについては、こちらですべて読むことができます。このプロパティをページ全体に適用しないように注意しbodyてください (以前に適用しました)。これにより、ページのパンとズームの既定のブラウザー動作が妨げられます。私が言ったように、ドラッグする要素にのみ適用すると機能します。

繰り返しになりますが、これは WP 8 での私の経験です。以前のバージョンの Windows Phone で機能するかどうかはわかりません。

于 2013-02-22T21:47:37.520 に答える