Default browser behavior causing anomalies.

[RickD]

In general, the DND library has worked well for me. But I am
experiencing anomalies which I think are a result of default browser
click & drag behavior.

The default behavior is to select an element for copying to clipboard
or dragging to the desktop. The element is left in a highlighted
state (partly transparent). When this happens, the DND stuff does not
work and I have to click someplace else to restore proper DND
behavior. This problem happens fairly frequently, say 10% of the time
or so.

I assume that this problem could be prevented by not allowing click &
drag events to "bubble up" to the browser. But so far my attempts to
do that have not fixed the problem.

I see this behavior on Safari, FF, and IE.

TIA

Rick

[Fred Sauer]

Rick,

There was a specific GWT issue for FireFox which has been fixed in 1.4, which ensures that the client code (gwt-dnd in this case) gets  mouse up events when the user does this outside the browser window (e.g. over the desktop or another window). That has helped tremendously.

You'll also find that the default CSS (included automatically with you inherit "com.allen_sauer.gwt.dragdrop.DragAndDrop") does include some CSS to help deal with the selection problem.

So far the best settings (partially suggested by users on this list) have become:

body {
   -moz-user-select: element;
   -khtml-user-select: element;
   user-select: element;
}

.dragdrop-handle {
  cursor: move;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

.dragdrop-dropTarget.dragdrop-engage {
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

I believe there is room for improvement though. So, please feel free to submit patches or make suggestions to better the anti-selection behavior.

Thanks
Fred

--
Fred Sauer
fr...@allen-sauer.com

[RickD]

Haven't tried GWT 1.4 yet, but I did figure out the problem and
solution.

The problem is indeed the browser's default behavior for selection/
drag of Images and Text. Although there are several alleged
"solutions" involving CSS style properties (-no-user-select, no-
select, etc.) none of those work. I also tried the 'onselectionstart
= function() { return false;}' technique, that didn't work either.
After nearly giving up, I finally found the solution (see
http://groups.google.com/group/Google-Web-Toolkit/msg/482e37b79cd5ab3b).

Here is all I had to do:

-----------------------------
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Image;

public class UnselectableImage extends Image {
public void onBrowserEvent(Event event) {
if ((DOM.eventGetType(event) & (Event.MOUSEEVENTS |
Event.BUTTON_LEFT)) != 0) {
DOM.eventPreventDefault(event);
}

// Don't forget to allow the normal event handling to occur.
super.onBrowserEvent(event);
}
}
-----------------------------

Just use this class instead of 'Image' class for things that you don't
want the default browser select/drag to screw things up.

Now everything works perfectly!

Ciao,

Rick

> On 6/12/07, RickD <radun...@mac.com> wrote:
>
>
>
>
>
> > In general, the DND library has worked well for me. But I am
> > experiencing anomalies which I think are a result of default browser
> > click & drag behavior.
>
> > The default behavior is to select an element for copying to clipboard
> > or dragging to the desktop. The element is left in a highlighted
> > state (partly transparent). When this happens, the DND stuff does not
> > work and I have to click someplace else to restore proper DND
> > behavior. This problem happens fairly frequently, say 10% of the time
> > or so.
>
> > I assume that this problem could be prevented by not allowing click &
> > drag events to "bubble up" to the browser. But so far my attempts to
> > do that have not fixed the problem.
>
> > I see this behavior on Safari, FF, and IE.
>
> > TIA
>
> > Rick
>
> --
> Fred Sauer

> f...@allen-sauer.com

[Fred Sauer]

Rick,

Thank you for diving into the details on this one! I'll see about adding this to a FAQ or something like that.

Fred

--
Fred Sauer
fr...@allen-sauer.com

[Fred Sauer]

Rick,

DOM.eventPreventDefault is now (as of gwt-dnd 1.2) being called automatically by the library, so you should no longer need this workaround in your code in order to drag images. The library also cancels the text selection at the start of the drag.

Fred

On 6/19/07, RickD <radu...@mac.com> wrote: