Drag and drop designing


We have a long waited ticket #119 about drag and drop support for Vaadin. It is currenlty scheduled for 6.3. We have already fired some fuzzy ideas in RnD, but nothing has really been implemented or decided yet. Lots of you have expressed interest towards drag and drop. So now it is good time to contribute some ideas.

But what does drag and drop mean for Vaadin? There is actually some drag and drop already implemented in/with Vaadin. Examples:

There are lots of ideas and possibilities, some of them arising now with HTML5 api.

Some of possibilities quickly listed below:

  • Sort/move components in layout or move them to another layout
  • Sort items or move them to another container (Tree and Table components)
  • Build own (client side) component with Drag and Drop support
  • Drag files from client file system to Vaadin applications
  • Drag other content (text, links, images…) from client to Vaadin application
  • Drag content from another browser window (generic web page) to Vaadin application
  • Drag content from Vaadin application to another browser window
  • Drag content from Vaadin application to another application in client machine

So please, before we end up designing something useless, quickly answer question in survey below and share all the ideas and possible real world use cases you have here on forum.

DnD survey


Ok, I’ll go fist so that we get the discussion going. Here are some use cases I’ve ran into:

Sorting rows in a Table dy DnD (also when multiple rows are selected).

Sorting a Tree by DnD

Dragging more or less arbitrary elements into a Tree. For example, consider a tree containing “milestones” and a table containing unscheduled tickets. I’d like to drag a table row (a ticket) to the tree, thus assigning the correct milestone for the ticket.

Ability define dragable elements (elements which can be picked up for dragging) and drag targets for the elements (where the dragable element can be dropped). For example, I have three layouts, A, B and C. I would like to be able to specify that components in layout A can be dragged to layout C but not to B. Components in B can be dragged both to A and C.

Ability to define if the actual element is being dragged or if a drag proxy should be used (see
this example
on drag proxies, change the “Drag proxy behavior” value to toggle between the different modes)

I’d also like to see, that the implementation of the DnD is easily extended to custom widgets so that if I need to create something more special/specific DnD behaviour, I do not need to reinvent the wheel.

My two cents

I agree overall with Kim.

I find, personnally, that something like
would be excellent, but I need to
a) be able to designate a list of valid targets which will be the ones on which drop is enabled. There are two cases: by type (e.g. all folders are ok) and by instance (e.g. these are the items on which drop is enabled)
b) be able to ask for a call back on the drop
c) to be able to cancel the drop with a feedback to the user (e.g. drop on that specific folder was denied because the phase of the moon is wrong).

I’ve also like to add that I’ve heard of cases where D’n’D would be to drag from some table a row and drop it in some other component - with the catch that it shouldn’t modify the original table at all. In other words the requested feature is only to get an event that row x was dragged unto component y and that nothing should be done automatically in the UI. This way it is easy to do in Java exactly what you want to do, in a function something like doDrag(Component source, Component target). I guess that both source and targets could also be rows in tables and trees.

Use case: you have two tables. The first one has ten elements and the second one is empty. The user gathers chooses three of them and drags them over from table one to two. At the end the first table still has ten elements and the second table has three. Would be a nice addition to the VaadinTunes demo where you can gather playlists.

I’m still re-writing my applications UI using Vaadin so I’m no-where near the point where I can start improving what my app can do, but I’ve been wondering whether Vaadin will allow me to write a wysiwyg editor for my application - I’d certainly require drag and drop support to pull that off.

I could find use for:

Layout allowing absolute positioning of its components, with the ability to drag components around to reposition them.
The ability to drag from a table on to such a layout to add new components to it
The ability to drag from such a layout to another component (trash can) to remove components from it
The ability to click and drag some anchor on a component to resize it
The ability to click and drag a file from the client in to a component in the browser

This is based upon my idea of the use case… My application is a a billing system for retail telcos. We have a bunch of clunky forms that allow a user to define the format and layout of PDF documents that they send to the user (PDF invoices, for example). At the moment defining one of these “stationeries” entails editing a big table with lots of fields. What you want to print, where (mm from top and left of page), what’re its margins, styles, etc. The complexity of these forms usually ends up with support staff defining the stationery instead of our customers.

I guess I’d be using some Layout (representing the end result PDF) positioning its Components absolutely with the ability to drag the Components around the layout to move them. I’d want to have a table on the same page with all of the fields that are available with the ability to drag an entry from that table on to my PDF preview allowing new fields to be added. Perhaps another Component representing a trash can so I can drag fields off the PDF to remove them.

The Components on the PDF would need to be resizeable, clicking and dragging some anchor to resize them.

Hopefully that helps =) It’s a bit of a pie in the sky idea for me at the moment, but it’d be an awesome feature for my applicaiton.

I just uploaded an early preview of the Drag ‘n’ Drop feature to youtube (with Matti’s help). I must say it all looks VERY NICE right now although things are still bound to change both under and on top of the hood.

Drag n Drop from the desktop to the browser especially looks very tempting:

Looks very cool, great job… Missing drag&drop in Vaadin was a blocker for me to convert to Vaadin, but I’ll guess I should start migration of my apps right now…:wink:

Cheers, Maik

Very nice indeed! Good work guys