gwt-dnd issues with firefox: widget loses mouse focus when drag is initiated on certain children?
rat...@gmail.com
I've recently begun implementing drag and drop functionality for
products at my company, and I've run into a bit of a snag. It seems
that when dragging things in firefox, the widget I'm trying to drag
will stop receiving MouseMove and MouseUp events once I begin to drag,
depending on which part of it I clicked on. When I release the mouse
button, the product jumps back to the cursor, which it then follows
properly. Upon clicking again, the functionality is the same as when I
clicked on it earlier - dragging it starts the process over, and a
simple click and release registers a click on the object and returns
it to its original location (that is to say, it seems to finally catch
the MouseUp event and act accordingly).
The widget I'm using is a subclass of the HTML object (that doesn't
override anything) created from a string like the following:
<table cellpadding="0" cellspacing="0" border="0" width="132">
<tr>
<td valign="top" width="132" align="center" style="height:168px">
<img src="....." border="0" />
</td>
</tr>
<tr>
<td valign="top" style="margin-top:1px; padding-left:5px; text-
align:left;">
<div style="margin: 5px 0px 0px 0px">
<a style="text-decoration:none;" href="javascript:.....
<span class=".....">
Some text
</span>
</a>
<br />
</div>
</td>
</tr>
<tr>
<td valign='top'style="text-align:left; padding-left:5px; ">
<span class=".....">
A price
</span>
</td>
</tr>
<tr>
<td valign="bottom" style="text-align:left; padding: 0px 0px 5px
5px; ">
<a class=".....">
<span onmouseout='.....' onmouseover='.....'>
<span style="color:#333333">
more
</span>
</span>
</a>
<a class="....." href="javascript:...">
<span style="color:#333333">
save
</span>
</a>
<a class="....." href="javascript:.....">
buy
</a>
<br />
<div style="position:relative;">
<div style="position:absolute;left:-70px;top:-30px;"
id=".....">
</div>
</div>
</td>
</tr>
</table>
which is basically a table with an image on the top, a little bit of
empty space in the middle, and some complex text stuff at the bottom.
I'm having this problem when I try to drag the HTML object by the
image or the ending text only; if I grab it by the empty area, it
works as intended.
Presumably, I could solve this problem by using a drag proxy, but I'd
rather not do that, since it would degrade user experience. I've tried
DOM.setCapture(HTML object being dragged), but that's already getting
called by the gwt-dnd code when I start dragging. (I've debugged in
firefox to verify that) I've also tried suppressing the native event
via DOM.eventPreventDefault, but to no avail.
My best guess about the cause of this problem is that the HTML object
is losing its hold on the mouse events just after I start dragging,
only to regain that hold after the mouse button has been released, and
this is somehow related to which part of the HTML object initiates the
drag.
Does anyone have any idea what might be causing this?
And if this question has been brought up before, or is a known bug, I
apologize. I've spent most of the day searching for information about
this, but it's possible I missed something.
Thank you all for reading my question and hopefully trying to help!
Nathan
Fred Sauer
Which version of GWT and gwt-dnd are you using?
Image dragging is indeed a special case where you have to suppress some of the browser's default behavior. In general CSS does the trick for this, but IE appears to need JavaScript.
You say that all works well in the empty area -- that's good news, and a good starting point. The image dragging not working can be fixed. I'm curious about the third area: the ending text. You are seeing the same behavior there as with the image?
Would you be able to put together a few lines of code that demonstrate the issue?
Thanks
Fred
Fred Sauer
fr...@allen-sauer.com
rat...@gmail.com
I'm using GWT version 1.4.10 and gwt-dnd version 1.1. I've been
playing with the bottom area in firefox, and it seems that only the
clickable areas are giving me problems - that is, the text wrapped in
<A> tags. I tried removing the <a> tag from the buy link and I was
then able to drag by 'buy' without a problem.
I'll see if I can put together a simple demonstration later today.
Thanks for your help!
Nathan
On Aug 9, 8:23 am, "Fred Sauer" <f...@allen-sauer.com> wrote:
> Ratsark,
>
> Which version of GWT and gwt-dnd are you using?
>
> Image dragging is indeed a special case where you have to suppress some of
> the browser's default behavior. In general CSS does the trick for this, but
> IE appears to need JavaScript.
>
> You say that all works well in the empty area -- that's good news, and a
> good starting point. The image dragging not working can be fixed. I'm
> curious about the third area: the ending text. You are seeing the same
> behavior there as with the image?
>
> Would you be able to put together a few lines of code that demonstrate the
> issue?
>
> Thanks
> Fred
>
Fred Sauer
In the short term, you can try something like this:
http://groups.google.com/group/gwt-dnd/browse_thread/thread/d9a076f02670edd1/f59f86d40c6e2d10?lnk=gst&q=UnselectableImage+&rnum=1#f59f86d40c6e2d10
To avoid the custom class, you could also register an EventPreview and call DOM.eventPreventDefault() for mousedown events. However, this slows down the event system, so may not work as well as you'd like, depending on how many objects you have.
However, since dragging images is such a common request, I've started to add functionality to support this natively in gwt-dnd (without extra work on the client application side). I'm planning on utilizing the current event object provided by GWT Issue 1309, which is pending for GWT 1.4RC2. So, once the new 1.4 comes out, you can expect to see a new gwt-dnd release that allows you to drag images out of the box.
Hope that helps
Fred
Fred Sauer
fr...@allen-sauer.com
rat...@gmail.com
I'd seen advice before that said to register an event preview, but I
had no luck with that. After you recommended it again, I tried
debugging my old implementation and found out that things don't work
quite the way I assumed they did. Specifically, when you register an
event preview, it goes into a stack of event previews, and when an
event is fired, only the top event preview is activated. I had assumed
that events would bubble up through the event previews. Of course,
this all means that if another event preview is added after the one
you described, the problem would still present itself. Since I was
using a PopupPanel to host my draggables, there was another event
preview getting executed instead of my own - the PopupPanel itself,
which implements EventPreview and adds itself to the stack whenever
it's opened.
So for a test, I overrode OnEventPreview in my PopupPanel subclass and
added the above event cancellation, and everything worked perfectly -
including dragging by the links at the bottom. Ultimately, though, I
found that overriding the OnBrowserEvent method in the HTML subclass
that I'm dragging worked just as well without relying on stack
position or being in a popup panel.
Thanks again for your help, Fred!
Nathan
On Aug 9, 12:07 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
> Nathan,
>
> In the short term, you can try something like this:http://groups.google.com/group/gwt-dnd/browse_thread/thread/d9a076f02...
>
> To avoid the custom class, you could also register an EventPreview and call
> DOM.eventPreventDefault() for mousedown events. However, this slows down the
> event system, so may not work as well as you'd like, depending on how many
> objects you have.
>
> However, since dragging images is such a common request, I've started to add
> functionality to support this natively in gwt-dnd (without extra work on the
> client application side). I'm planning on utilizing the current event object
> provided by GWT Issue
> 1309<http://code.google.com/p/google-web-toolkit/issues/detail?id=1309>,
> which is pending for GWT 1.4RC2. So, once the new 1.4 comes out, you can
> expect to see a new gwt-dnd release that allows you to drag images out of
> the box.
>
> Hope that helps
> Fred
>
Fred Sauer
I found that for IE I need to preventDefault for both the onmousedown and the onmousemove if I want drag proxies to work. So, that's what I have slated to go in the next release.
Glad things worked for you. The custom Image/HTML classes with an overridden onBrowserEvent (in which you preventDefault) is definitely the sane way to go if you don't mind the extra classes. Event previews are knarly at best.
Thanks
Fred
--
Fred Sauer
fr...@allen-sauer.com
Fred Sauer
In r278 I committed the changes to add DOM.eventPreventDefault in onmousedown and onmousemove so that images, anchors, and other widgets should become draggable out of the box.
Once 1.4RC2 comes out, I'll build and release a new gwt-dnd jar.
FYI
Fred
Fred Sauer
fr...@allen-sauer.com
Ibmurai
I had/have this problem too... I'll try extending PopupPanel like you
did...
On 9 Aug., 22:35, "rats...@gmail.com" <rats...@gmail.com> wrote:
> Thank you for your help! It's working now.
>
> I'd seen advice before that said to register an event preview, but I
> had no luck with that. After you recommended it again, I tried
> debugging my old implementation and found out that things don't work
> quite the way I assumed they did. Specifically, when you register an
> event preview, it goes into a stack of event previews, and when an
> event is fired, only the top event preview is activated. I had assumed
> that events would bubble up through the event previews. Of course,
> this all means that if another event preview is added after the one
> you described, the problem would still present itself. Since I was
> using aPopupPanelto host my draggables, there was another event
> preview getting executed instead of my own - thePopupPanelitself,
> which implementsEventPreviewand adds itself to the stack whenever
> it's opened.
>
> So for a test, I overrode OnEventPreview in myPopupPanelsubclass and
> added the above event cancellation, and everything worked perfectly -
> including dragging by the links at the bottom. Ultimately, though, I
> found that overriding the OnBrowserEvent method in the HTML subclass
> that I'm dragging worked just as well without relying on stack
> position or being in a popup panel.
>
> Thanks again for your help, Fred!
>
> Nathan
>
> On Aug 9, 12:07 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
>
>
>
> > Nathan,
>
> > In the short term, you can try something like this:http://groups.google.com/group/gwt-dnd/browse_thread/thread/d9a076f02...
>
> > To avoid the custom class, you could also register anEventPreviewand call
> > f...@allen-sauer.com- Skjul tekst i anførselstegn -
>
> - Vis tekst i anførselstegn -
Fred Sauer
I think you will find that the new gwt-dnd 1.2 makes the dragging of these otherwise undraggable widgets easier by taking care of the eventPreventDefault for you.
Cheers
Fred
> > f...@allen-sauer.com - Skjul tekst i anførselstegn -