0

境界線のある div があり、その右下隅にサイズ変更用の画像があります。

ここに画像の説明を入力

したがって、ユーザーが画像上でマウスを押すと、マウスをドラッグして div のサイズを変更できます。

これは、FireFox 以外のすべてのブラウザーで正常に機能します。

FireFox では奇妙なことが起こります。ユーザーがマウスを押してドラッグを開始すると、カーソルが次のように変わります。

ここに画像の説明を入力

そのため、マウスがドラッグされると、カーソルはこれに変わり、マウス移動イベントは発生しません。

この動作の原因は何なのか、私は疑問に思っています。FireFox は、ユーザーがマウスを押してドラッグしてテキストを選択しようとしていると考えているのではないかと思いました。しかし、このコードを使用してテキスト選択をキャンセルしました:

resizeImageImg.onselectstart          = "return false;";
resizeImageImg.ondragstart            = "return false;";

resizeImageImg.style.WebkitUserSelect = 'none';
resizeImageImg.style.KhtmlUserSelect  = 'none';
resizeImageImg.style.MozUserSelect    = 'none';
resizeImageImg.style.MsUserSelect     = 'none';
resizeImageImg.style.OUserSelect      = 'none';
resizeImageImg.style.UserSelect       = 'none';

resizeImageImg.setAttribute ("unselectable", "on");
resizeImageImg.setAttribute ("draggable",    "false");

(両方: div とサイズ変更イメージ)

しかし、これで問題は解決しませんでした。FireFox は依然としてサイズ変更を許可せず、カーソルを「許可されていません」に変更します。

誰でも助けてもらえますか？

4

2 に答える 2

1

Thank you all, I found the solution.

I replaced:

resizeImageImg.ondragstar = "return false;";

by

resizeImageImg.ondragstart = function () { return false; };

and it started working in FireFox as well.

What happens here is that if you want to process mouse-move events when your mouse-down event came from an image, then you have to make you image not-draggable. But this is not enough to use 

resizeImageImg.setAttribute ("draggable", false);

(at least in FireFox) becasuse events ondragstart are still coming. I understood this when I set:

resizeImageImg.ondragstart = function () { alert ("ondragstart"); return false; };

So I realized that FireFox does not obbey setAttribute ("draggable", false) - whilst other browsers do.

于 2012-02-01T14:03:51.383 に答える
0

アンディ、これが私が思いついた解決策です。私はそれを素早くそして使いやすくするために多大な努力をしました。

ここでファイルを表示できます：http： //files.social-library.org/stackoverflow/imageResizer.html

使い方は簡単です。画像を作成し、幅と高さを指定します。次に、ページが読み込まれたら、関数imageResizer.init（imageObject）を呼び出して、画像オブジェクトをパラメーターとして送信します。次に、ドラッガーを使用して画像を設定します。

これは、Firefox、Chrome、およびInternetExplorer8以降で機能します。

于 2012-01-31T19:49:01.347 に答える