Modified:
wiki/DragAndDrop_RR.wiki
Log:
Edited wiki page through web user interface.
http://www.jackslocum.com/blog/2006/12/29/preview-drag-and-drop-enhancements-and-the-new-treepanel/
I believe the dnd thing should send events to callbcks. It should not
be removing the dragged widget from its original place in the dom and
inserting it when it is dropped.
> http://www.jackslocum.com/blog/2006/12/29/preview-drag-and-drop-enhan...
My current usecase (which I do have a working implementation for)
allows multiple widgets to be selected (shift+click / ctrl+click)
then on drag start, begins dragging all of those widgets ... think
dual list with DnD support.
So it would be nice to have a DnD api that would somehow allow
multiple widgets to be dragged at once.
Also, it may be the case that you don't want to initially move the
widgets themselves, but rather an outline or some other
representation of the widget(s) being dragged to aid browser
rendering. I suppose the API should also somehow support that.
-jason
- Allow any widget (meaning any class that extends Widget) which is visible on the screen to be dragged to any other position on the screen. This means that the Drag and Drop API must support making any existing widget "draggable".
- The styling of the widget should be configurable through CSS on its selection for dragging, while being dragged, and after its release
Should we have a separate drag canceled event?
- Events on the widget being dragged should fire at the start of the drag, during the drag itself, and at the end of the drag
- Other widgets (if they so choose) should fire off events whenever a dragged widget has entered the other widget's boundaries, whenever a dragged widget has left the other widget's boundaries, and whenever the dragged widget is dropped on top of the other widget
- The event implementation should follow the event-related patterns that are already present in GWT
- Provide default implementations/styles of the most common drag and drop use cases
- Optimizations are important - an implementation of drag and drop that performs poorly is not a useful implementation. We must be sure that:
- The performance of widgets which are not participating in either being dragged, or reacting to a widget being dragged over top of itself should not be impacted by other widgets participating in a drag/drop interaction
- Bounds checking to detect whether or not a widget is on top of another widget must be implemented carefully as to avoid performance problems
@Sandy: I honestly had just thought about widgets as the drag indicator, but you do bring up a good point about table rows. In one of the code contributions that I have seen (in which I have encouraged the contributors to post to this group; the RR will contain a summary of their ideas), there is the idea of a Table which contains widgets.[...]
@Jason: I agree that we need to build in support for multiple selection/dragging multiple widgets. That would be slick, and it is probably going to be a feature that users of drag and drop will expect. I think you would be able to achieve the "outline" effect through a CSS style that applies to the widget when it is being dragged. Do you think it would be better to be more explicit about this?
@mP: I agree that the attaching/detaching idea should not be the only way that we implement drag and drop (if at all). I do not really see a need to do this. As you say, the detection of the dragging of one widget on top of another is the important point, in which case the widget below will receive and event. Also, can you elaborate a bit more on your Factory idea? I'm not sure that I understand it fully.
I've been working on my own independent framework for drag and drop.
I'll put it up on a Google Hosted Project in the near future, but for
now you can see a demo here:
http://dragdrop.grapier.googlepages.com/DragDrop.html
It's not quite as cool as Fred's awesome demo, but it has a good deal
of stuff. Specifically, it contains what Rajeev was referring to: a
table with widgets that you can reposition by drag-and-drop.
Enjoy!
Chung
> widgets (both implementations may implement DropListener(), for example).
> > > - Allow any widget (meaning any class that extends Widget) which
> > > is visible on the screen to be dragged to any other position on the screen.
> > > This means that the Drag and Drop API must support making any existing
> > > widget "draggable".
>
> > Yes, but I would also like to be able to constrain the drag area to a
> > panel smaller than the entire page (see demo here<http://code.google.com/p/gwt-dnd/>).
> > I think containing the widget to a panel with "overflow: hidden" is more
> > intuitive than allowing the draggable object to go anywhere in the browser
> > window, but showing the international "no parking" symbol ( i.e. the
> > circle with the slash through it). The user might be tempted to look for
> > hidden drop zones where none exist.
>
> > Also, for the application developers:
>
> > 1. "any existing widget" should mean that there is no Draggable
> > class to extend or Draggable interface to implement.
> > 2. Ideally we can even make a Widget draggable which does not
> > implement SourcesMouseEvents.
> > 3. Any existing Widget should be able to become a drop target.
> > Again, no interface to implement or class to extend.
> > 4. If the drop target Widget happends to be a Panel, then more
> > complex drop operations are allowed.
>
> > > - The styling of the widget should be configurable through CSS on
> > > its selection for dragging, while being dragged, and after its release
>
> > > The behavior of the draggable widget as it relates to the DOM should be
> > configurable (and ultimately customizable through class extension) for each
> > of the phases:
>
> > - drag start
> > - while dragging
> > - just before dropping (i.e. while engaging a potential drop target)
> > - on drop
> > - on cancel/veto of the drop
>
> > Out of the box we can consider some standard 'behaviors' which are
> > provided, e.g.
>
> > 1. Widget stays at original location during drag; some placeholder
> > (such as an outline box) is dragged around; widget snaps to final location
> > on drop
> > 2. Same, but a deep copy of the original widget is dragged around
> > instead of the outline; should probably not be the default behavior as deep
> > copy must be defined and side-effects understood
> > 3. Widget is removed from original location on drag, is moved
> > around, but will snap back to original location on cancel/veto
> > 4. others?
>
> > The behaviors should also define what happens:
>
> > 1. When engaging a simple drop target (e.g. trash can), how does the
> > target react to indicate contact or engagement? Maybe define an effect from
> > that new effect framework which has been proposed? :-)
> > 2. When engaging more complex drop targets I'd like to see the
> > option for a positioning box which indicates where the draggable Widget
> > would drop if you were to let go of the mouse button. This mostly makes
> > sense when dragging/moving widgets around an AbsolutePanel on within the
> > members of say FlowPanel.
>
> > > - Events on the widget being dragged should fire at the start of
> > > the drag, during the drag itself, and at the end of the drag
>
> > > Should we have a separate drag canceled event?
>
> > > - Other widgets (if they so choose) should fire off events
> > > whenever a dragged widget has entered the other widget's boundaries,
> > > whenever a dragged widget has left the other widget's boundaries, and
> > > whenever the dragged widget is dropped on top of the other widget
>
> > I would include events when the dragged widget is moved while within the
> > other widget's boundaries to support drag-and-move.
>
> > > - The event implementation should follow the event-related
> > > patterns that are already present in GWT
>
> > There's another thread which talks about revamping and deprecating the
> > current event handling in the core GWT classes and using Handler objects
> > which are more future proof. Depending on where that discussion goes we may
> > need both the old and new APIs, assuming there's a new Handler mechanism.
>
> > > - Provide default implementations/styles of the most common drag
> > > and drop use cases
>
> > Agreed, we should have something more than say TabPanel has today, which
> > doesn't look like tabs until you add your own CSS.
>
> > Do any of the GWT modules today provide additional default CSS which can
> > be added by the application if they need it? I'm thinking here that you
> > could have two CSS files. One is automatically included via the stylesheet
> > tag in the dnd module .gwt.xml file while the other is available in the jar,
> > but not automatically included unless explicitly specified in the
> > application .gwt.xml file.
>
> > > - Optimizations are important - an implementation of drag and drop
> > > that performs poorly is not a useful implementation. We must be sure that:
> > > - The performance of widgets which are not participating in
> > > either being dragged, or reacting to a widget being dragged over top of
> > > itself should not be impacted by other widgets participating in a drag/drop
> > > interaction
> > > - Bounds checking to detect whether or not a widget is on
> > > top of another widget must be implemented carefully as to avoid performance
> > > problems
>
> > > Where possible it would be nice to use the browser event object to
> > detect which objects are being targeted. This is straightforward on the drag
> > and move by intercepting mouse events, but doesn't really work on the drop
> > side.
>
> > On 2/6/07, Rajeev Dayal < rda...@google.com> wrote:
>
> > > @Sandy: I honestly had just thought about widgets as the drag indicator,
> > > but you do bring up a good point about table rows. In one of the code
> > > contributions that I have seen (in which I have encouraged the contributors
> > > to post to this group; the RR will contain a summary of their
>
> ...
>
> read more »
I have created a new thread in GWT Users:
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/d2e7f7c1ea93e423
Discussions with regard to use cases (things that we want drag and
drop to do/not do) should continue on this thread. I think that the
functionality of drag-and-drop is more of a user-facing problem. We
can keep the API discussions (which are more of a contributor-facing
problem) going on this thread.
Thanks,
Rajeev
This one required a bit of hacking on ClickListener to get
onShiftClick, onCtrlClick and onDblClick events. <- that of course is
a discussion for another thread.
But this demo shows my primary DnD use case ... Multiple widget drag,
specified drop zones that can refuse to accept particular types of
widgets being dragged (not well demonstrated here) and auto canceling
of a drag when attempting to drop somewhere invalid.
-jason
onClicked
listeners can control just how many widgets are selected.
onBeforeStart
listeners can veto if they dont want the widget to be dragged now.
onStart
when dragging has started.
onBeforeMove
whenever the widget is about to be moved. listeners can veto a
movement. This allows one to force a widget not to leave a zone.
onMove
after the widget has been moved. Listeners can use this event to
highlight a target drop zone if the mouse is hovering over it. Whyen
the widget moves again the same listener can cleanup and highlight
something else etc.
onBeforeDrop
listeners can veto if they dont want to the widget to be dropped.
onDrop
when the widget is dropped.
> listeners can veto if they dont want to the widget to be dropped right now.
> onDrop
> when the widget is dropped.
onDropCancelled
if a widget is dropped on the wrong spot.
There are obviously several existing implementations at this point.
The trick is working out what the api should look like, then taking
what the different implementations have learned to make one really
complete implementation.
my implementation fires the following events:
onPreDrag (used to disable some default browser behavior)
onDragStart (fired before the first onDrag event to prepare the widget
for dragging)
onDragOver (fired when an item is dragged over something that could be
a drop target)
onDrag (Correlates directly to onMouseMove)
onDragOut (fired when the iterm is no longer over the drag target)
onDrop (fired when the item is dropped)
onCancelDrag (fired rather than onDrop when an item is dropped in an
invalid location)
onPostDrag (fired after widgets have been dropped or canceled to
reset certain browser default behavior)
This many different events are probably overkill, but at the time they
seemed to be the best way to handle the issues I ran up against while
working on my implementation.
The code I have is quite ugly, and not fit for use as a proper GWT
implementation, but there are some gems in it for dealing with some
platform specific weirdness.
What events do the other implementations fire?
Which ones do we really need?
-jason
What events do the other implementations fire?
Our implementation fires the following events:
* DragSource
boolean onDragStart (vetoable by return value)
* DropTarget
void onDragEnter();
void onDragOver();
void onDragLeave();
void onDragFreeze(); called when the cursor stays motionless for a
certain amount of time above a droptarget - usefull to open
automatically a tree node for example.
void onDrop(List objects, int nDropAction);
Furthermore, the drag & drop manager uses, amongst other functions,
the following ones:
* DragSource
List getDraggedObjects();
Widget getDraggedWidget(); --> the widget moving with the cursor.
Could be a drag source clone, or whatever.
* DropTarget
boolean canAccept(List objects, int nDropAction); --> this is not
strictly an OnPreDrop. Could be called at onDragStart time to pre-
select some drop targets.
The drag&drop protocol in itself doesn't make any assumptions about
the logically dragged objects (generally, Model part of MVC)
Actually, my code for this one is really ugly, so the events that
I've mentioned may not be relevant at all ...
But, onPreDrag is fired onMouseDown, onDragStart is not fired until
the first onMouseMove() and just prior to the first onDrag()
Then onMouseUp, either onDrop() or onCancelDrag() is fired, followed
by onPostDrag()
onPreDrag and onPostDrag are not really even events, but rather hooks
used for disabling and re-enabling some browser specific drag/select
behavior ... did I mention that this code was ugly? These methods
really should have never been part of that interface.
-jason
Thanks for the clarification.
I was wondering, since some widgets can both have an onClick event and
can also be draggable, would the onPreDrag/onPostDrag interfere with
the onClick behavior? What is some of the browser-specific behavior
that you are modifying with these hooks?
Rajeev
On Feb 12, 2:32 pm, Jason Essington <jason.essing...@gmail.com> wrote:
> sorta...
>
> Actually, my code for this one is really ugly, so the events that
> I've mentioned may not be relevant at all ...
>
> But, onPreDrag is fired onMouseDown, onDragStart is not fired until
> the first onMouseMove() and just prior to the first onDrag()
>
> Then onMouseUp, either onDrop() or onCancelDrag() is fired, followed
> by onPostDrag()
>
> onPreDrag and onPostDrag are not really even events, but rather hooks
> used for disabling and re-enabling some browser specificdrag/select
> behavior ... did I mention that this code was ugly? These methods
> really should have never been part of that interface.
>
> -jason
>
> On Feb 12, 2007, at 11:44 AM, Rajeev Dayal wrote:
>
> > Hey Jason,
>
> > In this case, is onPreDrag basically a preview of the onDragStart
> > event?
>
> > Rajeev
>
> > On 2/8/07, mP < miroslav.poko...@gmail.com> wrote:
>
> > > On Feb 9, 1:43 pm, "mP" <miroslav.poko...@gmail.com > wrote:
> > > > The way I did my dnd support was making all the different
> > phases int
> > > > he dnd process events.
> > > > By making lots of stuff an event listeners can change the
> > behaviour of
> > > > any part of the dnd process.
>
> > > > onClicked
> > > > listeners can control just how many widgets are selected.
>
> > > > onBeforeStart
> > > > listeners can veto if they dont want the widget to be dragged
> > now.
> > > > onStart
> > > > when dragging has started.
>
> > > > onBeforeMove
> > > > whenever the widget is about to be moved. listeners can veto a
> > > > movement. This allows one to force a widget not to leave a zone.
> > > > onMove
> > > > after the widget has been moved. Listeners can use this event to
> > > > highlight a targetdropzone if the mouse is hovering over it.
I have removed the RR for Drag and Drop from the Wiki, as it was not a
good example of an RR. The RR was incomplete, and looked more along
the lines of 'musings on how we want Drag and Drop to work', which is
exactly what this thread is for (along with the other thread on the
users group). The Wiki should only contain relatively complete
documents (subject to refinement, of course).
Once we have fleshed out most of the API ideas (and functionality
ideas on the other group), then I will put together a complete RR and
post it.
Let me know if you have any questions, and I am sorry for the
confusion.
Rajeev
On Feb 15, 2007, at 11:11 AM, gwt.team.rdayal wrote:
> Thanks for the clarification.
no problem.
> I was wondering, since some widgets can both have an onClick event and
> can also be draggable, would the onPreDrag/onPostDrag interfere with
> the onClick behavior?
Nope, it didn't seem to. My demo, shows that I use both onClick and
onDblClick in addition to the DnD behavior.
> What is some of the browser-specific behavior
> that you are modifying with these hooks?
The default drag (text selection) behavior on some browsers (IE)
can't be suppressed with a regular call to DOM.eventPreventDefault()
or DOM.eventCancelBubble(). The only way to suppress it was to use
some JSNI to return false from the $doc.body.ondrag and
$doc.body.onselectstart functions.
-jason
Just to announce an (other) developer is working on a Drag and Drop, I
created a groups and a code.google so that you can DL it:
http://code.google.com/p/dragmovedrop/
I'm just working everyday on it, 10hours per days, and I think I'm
making something really huge, so that it can answer all use cases,
Alex Gorisse