0

I have a div with border and in its right-bottom corner I have image for resizing:

enter image description here

So when user presses mouse on the image, he (or she) can drag mouse and resize the div.

This works fine in all browsers but FireFox.

In FireFox something strange happens: after the user presses mouse and starts dragging, the cursor changes to:

enter image description here

So the cursor changes to this one and mouse move events are not coming, when the mouse is dragged.

I am wondering, what causes this behaviour. I thought maybe FireFox thinks that the user is trying to select text by pressing and dragging the mouse. But I cancelled text selection using this code:

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");

(for both: the div and the resize image)

But this did not solve the problem. FireFox still does not let resizing and changes cursor to "not-allowed".

Can anybody please help?

Andrey Rubliov
  • 1,359
  • 2
  • 17
  • 24

2 Answers2

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.

Andrey Rubliov
  • 1,359
  • 2
  • 17
  • 24
0

Andy, here is the solution I have come up with. I have gone to great effort to make it quick and easy to use.

You can view the file here: http://files.social-library.org/stackoverflow/imageResizer.html

It is simple to use. Create your image and specify a width and height. Then, once the page loads call the function imageResizer.init(imageObject) sending the image object as a parameter. It will then set the image up with the dragger.

This works in firefox, chrome and internet explorer 8+.

Shane
  • 2,007
  • 18
  • 33
  • Thanks, I checked your solution, it is cool. My one is similar (I cannot give a link to it, because it is a private project and you need login/password to access). But for some reason in my solution some browsers did not let the mouse-move events pass through. IE did allow. So I understood, that my resize-image (the red diagonal stripes) should set attribute ondragstart = function () { return false; }; so the browser will not process mouse-move events and will let my function to process them. – Andrey Rubliov Feb 01 '12 at 14:06