dragging image gives odd behavior
in [JavaScript]
|
Prev: Alt text for equations
Next: qooxlisp live
From: J.J.Cale on 7 Jun 2010 12:58 The good news is the behavior is the same in IE6 and Firefox3.5. The bad news: 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
From: David Mark on 8 Jun 2010 13:26 On Jun 7, 12:58 pm, "J.J.Cale" <ji...(a)012.net.il> wrote: > The good news is the behavior is the same in IE6 and Firefox3.5. Yes, that is good news. :) > The bad news: 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!
From: nick on 8 Jun 2010 22:06 On Jun 7, 12:58 pm, "J.J.Cale" <ji...(a)012.net.il> wrote: > The good news is the behavior is the same in IE6 and Firefox3.5. > The bad news: 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
From: J.J.Cale on 9 Jun 2010 11:27 On Jun 9, 5:06 am, nick <nick...(a)fastmail.fm> wrote: > On Jun 7, 12:58 pm, "J.J.Cale" <ji...(a)012.net.il> wrote: > > > The good news is the behavior is the same in IE6 and Firefox3.5. > > The bad news: 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 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
From: David Mark on 9 Jun 2010 12:04
On Jun 9, 11:27 am, "J.J.Cale" <ji...(a)012.net.il> wrote: > On Jun 9, 5:06 am, nick <nick...(a)fastmail.fm> wrote: > > > > > > > > > > > On Jun 7, 12:58 pm, "J.J.Cale" <ji...(a)012.net.il> wrote: > > > > The good news is the behavior is the same in IE6 and Firefox3.5. > > > The bad news: 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 > > 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. |