Constrainted Dragging

56 views
Skip to first unread message

arthur

unread,
Jun 14, 2007, 11:36:54 AM6/14/07
to gwt-dnd
Hi,

I have just started experimenting with the dragdrop extension.

In my app, I need to restrict the dragging of an item to vertically
within a bounded area.

I have looked at the demos, they don't seem to have any constraints
on the dragging part. They constraints on the drop part. Also looked
at the PickupDragController, it doesn't have any constraint options.

Is this possible with the current implementation?

Thanks in advance.

Arthur.

Fred Sauer

unread,
Jun 14, 2007, 11:52:12 AM6/14/07
to gwt...@googlegroups.com
Arthur,

The boundaryPanel you specify when creating the DragController is used to constrain the drag operation. When left unspecified it defaults to the BODY (really RootPanel.get()). You can make the boundary as small as a single drop target to allow dragging only within a single drop target widget, or as large as the entire page (BODY).

Fred

arthur

unread,
Jun 15, 2007, 1:20:54 PM6/15/07
to gwt-dnd
Hi Fred,
I tried setting the boundaryPanel. It does constraint valid drops
to within boundaryPanel but I also want to be able to stop the dragged
widget from visually appearing outside of the boundaryPanel while
mouse is dragging to widget. Does this make sense? Might not be
explaining it correctly.

Is there an option to do that? Or do you think I need to extend the
DropController to restricted the onMouseMove?

Thanks.

Arthur.


On Jun 14, 11:52 am, "Fred Sauer" <f...@allen-sauer.com> wrote:
> Arthur,
>
> The boundaryPanel you specify when creating the DragController is used to
> constrain the drag operation. When left unspecified it defaults to the BODY
> (really RootPanel.get()). You can make the boundary as small as a single
> drop target to allow dragging only within a single drop target widget, or as
> large as the entire page (BODY).
>
> Fred
>

> On 6/14/07, arthur <arthur....@gmail.com> wrote:
>
>
>
>
>
> > Hi,
>
> > I have just started experimenting with the dragdrop extension.
>
> > In my app, I need to restrict the dragging of an item to vertically
> > within a bounded area.
>
> > I have looked at the demos, they don't seem to have any constraints
> > on the dragging part. They constraints on the drop part. Also looked
> > at the PickupDragController, it doesn't have any constraint options.
>
> > Is this possible with the current implementation?
>
> > Thanks in advance.
>
> > Arthur.
>

> --
> Fred Sauer
> f...@allen-sauer.com

Fred Sauer

unread,
Jun 15, 2007, 1:46:45 PM6/15/07
to gwt...@googlegroups.com
Arthur,



On 6/15/07, arthur <arthu...@gmail.com> wrote:

Hi Fred,
  I tried setting the boundaryPanel.  It does constraint valid drops
to within boundaryPanel but I also want to be able to stop the dragged
widget from visually appearing outside of the boundaryPanel while
mouse is dragging to widget.  Does this make sense?  Might not be
explaining it correctly.

  Is there an option to do that?  Or do you think I need to extend the
DropController to restricted the onMouseMove?

This is exactly what the purpose of the boundary panel is! The widget, and the drag positioner (that blue dotted outline) should not leave the boundary panel at any time.

Any chance you are using IE? There's a fail-to-clip ( i.e. fail to honor overflow:hidden) bug in IE.  See GWT issues 182 and 318 for some details. In any case, please try FireFox to see if your problem goes away.

Is your widget maybe draggable by more than one drag controller, and thus more than one boundary panel is potentially applicable? Each widget should only be made draggable once, and with one drag controller.

Fred

arthur

unread,
Jun 15, 2007, 2:50:19 PM6/15/07
to gwt-dnd
Hi Fred,

Yes, I was testing with with IE.

I tried with FF and see that it does the clipping of the dragged
widget.

But this is not exactly what I wanted. I would prefer that the widget
is not clipped when the widget goes outside of the boundaryPanel. It
should just stop following the mouse move at the boundaries.

Do you think that is might be a common requirement? Maybe as option?

By the way, thanks for writing this extension to gwt. It's been great
having this library to work with then trying to write my own :)

Arthur.

On Jun 15, 1:46 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
> Arthur,
>

> On 6/15/07, arthur <arthur....@gmail.com> wrote:
>
>
>
> > Hi Fred,
> > I tried setting the boundaryPanel. It does constraint valid drops
> > to within boundaryPanel but I also want to be able to stop the dragged
> > widget from visually appearing outside of the boundaryPanel while
> > mouse is dragging to widget. Does this make sense? Might not be
> > explaining it correctly.
>
> > Is there an option to do that? Or do you think I need to extend the
> > DropController to restricted the onMouseMove?
>
> This is exactly what the purpose of the boundary panel is! The widget, and
> the drag positioner (that blue dotted outline) should not leave the boundary
> panel at any time.
>

> Any chance you are using IE? There's a fail-to-clip (i.e. fail to honor

Fred Sauer

unread,
Jun 15, 2007, 4:02:47 PM6/15/07
to gwt...@googlegroups.com
Arthur,

The draggable should be clipped, but the positioner should definitely be stopping at (bumping into) the edges of the boundary panel. You'll notice in the online demo that there is a blue area which has this caption:
BoundaryDropController
Most of our example drag operations are constrained to the panel below. Try drag one of the widgets outside this area.
You will also notice that the blue outline stops at the edges, but that the draggable is clipped. This is the intended behavior.

It sounds like you want both to bump into the edges. That shouldn't be too hard to do. Just a matter of overriding MouseDragHandler#actualMove so that it no longer just does this:
    boundaryPanel.setWidgetPosition(movableWidget, desiredLeft, desiredTop);


Hope that helps
Fred

On 6/15/07, arthur < arthu...@gmail.com> wrote:



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

arthur

unread,
Jun 15, 2007, 6:55:17 PM6/15/07
to gwt-dnd
Hi Fred,

I can extend the MouseDragHandler to do this but how do I tell the
DragController to use the new MouseDragHandler?

Currently I am using the PickupAndDragController and it creates a
MouseDragHandler itself. There is no way to give it the new
MouseDragHandler that I would implement.

Am I not seeing something?

Thanks.

Arthur.


On Jun 15, 4:02 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
> Arthur,
>

> The draggable should be clipped, but the positioner should definitely be
> stopping at (bumping into) the edges of the boundary panel. You'll notice in
> the online demo that there is a blue area which has this caption:
>
> BoundaryDropController

> *Most of our example drag operations are constrained to the panel below. Try
> drag one of the widgets outside this area.*


>
> You will also notice that the blue outline stops at the edges, but that the
> draggable is clipped. This is the intended behavior.
>
> It sounds like you want both to bump into the edges. That shouldn't be too
> hard to do. Just a matter of overriding MouseDragHandler#actualMove so that
> it no longer just does this:
> boundaryPanel.setWidgetPosition(movableWidget, desiredLeft, desiredTop);
>
> Hope that helps
> Fred
>

> f...@allen-sauer.com

Fred Sauer

unread,
Jun 15, 2007, 7:02:35 PM6/15/07
to gwt...@googlegroups.com
Arthur,

You're not missing anything. Currently your only option is to also extend the drag controller, just so that you can use your custom MouseDragHandler.

Fred

On 6/15/07, arthur <arthu...@gmail.com> wrote:
> > > Any chance you are using IE? There's a fail-to-clip ( i.e. fail to honor

> > > overflow:hidden) bug in IE.  See GWT issues 182 and 318 for some
> > details. In
> > > any case, please try FireFox to see if your problem goes away.
>
> > > Is your widget maybe draggable by more than one drag controller, and
> > thus
> > > more than one boundary panel is potentially applicable? Each widget
> > should
> > > only be made draggable once, and with one drag controller.
>
> > > Fred
>
> --
> Fred Sauer
> f...@allen-sauer.com





--
Fred Sauer
fr...@allen-sauer.com
Reply all
Reply to author
Forward
0 new messages