views:

38

answers:

4

I am developing an image cropper and would like to ask you the following question: In order to prevent the default drag n' drop action when you press the left button on an image and keeping it pressed try to move the mouse, wouldn't it be cross-browser if to just use the picture as a background to a div box?

Just like so:

<div id="theDiv" style="background:url(pic.png) no-repeat;"></div>

How do you think? Is it acceptable? Not too ugly? Or should be done with JS?

A: 

I would do the same, there is no real other way (as far as I know of) of doing what you want to do crossbrowser.

marcgg
A: 

Are you using a framework? Isn't there a reliable "dragstart" implementation in each of them that can simply be made return false? Correct me if I'm wrong.

Pekka
See the same poster's http://stackoverflow.com/questions/1807334/js-how-to-prevent-the-default-action-on-images-in-browsers
bobince
A: 

You can set your own mouse events which will be more logical way. You will not even need to write code on per-browser basis AFAIK. This event handlers can be used to set crop frame also.

But your approach is simpler, if you haven't plans on extend this much .

stroncium
A: 

wouldn't it be cross-browser if to just use the picture as a background to a div box?

Yes, but you'd still be starting a drag; if you moved the pointer over into part of the page with text in, you'd be selecting the text, which you probably wouldn't want.

I'd stick with the x.ondragstart=x.onmousedown= function() { return false; };.

bobince