dragging image gives odd behavior

[J.J.Cale]

The good news is the behavior is the same in IE6 and Firefox3.5.
The bad When I try to drag the image, after 2 pixels I get the
'no drag' cursor and the drag stops. If I then release the mouse
button no drag occurs. BUT if I bring the cursor back over the image
(without a mousedown) the image is "captured" and I am able to drag
it and drop it where I want. Could someone please correct my code?

the example is at www.ezphoto.co.il/test/puzzle/test1.htm

TIA Jim

 

[David Mark]

The good news is the behavior is the same in IE6 and Firefox3.5.

Yes, that is good news.

The bad When I try to drag the image, after 2 pixels I get the
'no drag' cursor and the drag stops.

No drop cursor? Also, often abused as a "no click" cursor.

If I then release the mouse
button no drag occurs. BUT if I bring the cursor back over the image
(without a mousedown)  the image is "captured" and I am able to drag
it and drop it where I want. Could someone please correct my code?
Possibly.


the example is atwww.ezphoto.co.il/test/puzzle/test1.htm

Good luck!

 

[nick]

The good news is the behavior is the same in IE6 and Firefox3.5.
The bad When I try to drag the image, after 2 pixels I get the
'no drag' cursor and the drag stops. If I then release the mouse
button no drag occurs. BUT if I bring the cursor back over the image
(without a mousedown)  the image is "captured" and I am able to drag
it and drop it where I want. Could someone please correct my code?

the example is atwww.ezphoto.co.il/test/puzzle/test1.htm

TIA Jim

Jim,

- return false from the event handlers so the normal event handling
won't take place.

- listen for 'mouse up' events on the holder or body, not the image.
The mouse cursor may be outside of the image when the button is
released.

http://jsbin.com/ojufi/edit

 

[J.J.Cale]

Jim,

- return false from the event handlers so the normal event handling
  won't take place.

- listen for 'mouse up' events on the holder or body, not the image.
  The mouse cursor may be outside of the image when the button is
  released.

http://jsbin.com/ojufi/edit

Nick thank you. In the mousemove handler I added "if
(e.preventDefault) preventDefault();" for FF and "return false;" for
IE and both are dragging nicely. Are e.cancelBubble and e.returnValue
still used in IE? I only have IE6 to test on. What will IE8 do with
this code?
Jim

 

[David Mark]

Nick thank you. In the mousemove handler I added "if
(e.preventDefault) preventDefault();" for FF and "return false;" for
IE and both are dragging nicely.

You are mixing and matching DOM's. Forget returning false unless you
are using DOM0.

Are e.cancelBubble and e.returnValue

Canceling bubbling (which should almost never be done) has nothing to
do with this. As for returnValue, that's preventDefault's opposite
number.

still used in IE?

Yes they are.

I only have IE6 to test on. What will IE8 do with
this code?

If you get this part of it working in IE6, IE8 will be fine. If you
use proper feature detection, IE9 should be fine as well.

 

[Richard Cornford]

On Jun 9, 6:04 pm, David Mark wrote:


Could you please elaborate on what you mean by this? I tried
the OP's code with "return false" in the three event handlers
Mouseup, Mousedown and Mousemove and it worked perfectly in
Firefox 3.5 and IE6 (on Wine).

<snip>

Aren't you making the point here? Where - return false; - ever works
to cancel a default action it works everywhere, and there is no need
to involve - preventDefault - calls. That is, if using 'DOM 0' event
handling is viable then it is all that is needed.

Unless you mean that you tried code with both - return false; - and -
preventDefault - calls, in which case you should not take "worked
perfectly" as indicative of correctness. It is possible to add any
number of redundant and pointless actions to code that already "worked
perfectly" without stopping it from working, and then the observation
that it still "worked perfectly" would not justify the redundant and
pointless actions added to the original.

Richard.

 

[David Mark]

Could you please elaborate on what you mean by this? I tried the OP's
code with "return false" in the three event handlers Mouseup,
Mousedown and Mousemove and it worked perfectly in Firefox 3.5 and IE6
(on Wine).

And which has more weight, observations of "perfection" (as seen in
such classics as jQuery unit tests, SlickSpeed, etc.) or
understanding? It's the same lesson over and over. Do not program by
observation. If the only justification you have for a line of code is
your observation that it "works perfectly" in whatever browsers you
have on hand, you have no justification at all.

Furthermore, did I say that returning false could not work?

This is a genuine attempt to learn something and therefore it would be
appreciated if you could turn off the sarcasm for a short time.

What sarcasm? Perhaps you should have a native English speaker read
this thread back to you.

Next time you want help, leave off the random insult.