Flow: Generic Drag and Drop for Flow

[pleku]

This issue is about generic HTML5 drag and drop implementation for Flow components, similarly as it has been introduced in Framework 8.1. This means that any component can be easily made draggable or a drop zone.

For specific components implementations, like layouts (reordering components) / grid (rows), there will be separate issues in the corresponding component repositories.

User stories

• When building an app, I want to allow the user to drag and drop components, so that I can
  
  
  
  • [x] create a dashboard where the user can drag dashboard widgets to create the dashboard they want
  
  
  • [x] create an app where the user can create forms by dragging UI components to the form
  
  
  • [x] create an app that has shows items in different stages
  
  
• [x] When building an app that has DnD features for end users, I want to also enable it on touch devices, even though those are not supported by the device (using polyfill)

Dragging things

• [ ] #6707 When building an app, I want to make any component draggable, so that the user can drag and drop data from the my app to an external app
• [x] When creating a draggable component, I want to be able to specify the drag operation to it, so that the component can be eg. removed once the drop occurs in a valid drop location
• [ ] #6793 When creating a draggable component, I want to be able to specify a custom drag image to it, so that I can perfect the end user experience (for those browsers that support customizing it)

Dropping things

• [ ] #6709 When building an app, I want to create a drop zone with a component so the user can drop text / URIList / JSON content from outside of the browser to it and I can then use the data in my app
• [x] When creating a component that is a drop zone, I want to highlight it when the user is dragging data, so that they know where they can drop it (w. class name + style)
• [ ] #6795 When building an app, I want to create a drop zone with a component so the user can drop files from outside of the browser to it and those can be used in the app
• [x] When creating a component that is a drop zone, I want to add a criteria to it that determines whether or not the drop is accepted based on the drag data, so that the user knows where he can drop things and where not
• [ ] #6796 When creating a component that is a drop zone, I want to automatically highlight whether the drop would happen on the top/right/bottom/left edge of the component, so that I can perfect the end user experience when the drop location depends on which side of the component the dragged object is

Dragging and Dropping things inside the same UI

• [x] When creating a draggable component, I want to be able to assign the business data associated with the drag to the server side UI, so that I can retrieve it when the drop happens on the same UI without having to parse JSON or expose the data on the client side

[pleku]

Updated the issue with the user stories we're looking to support. Mostly the same as with FW 8, but there are some tweaks / additions.

The target is to ship all in a stable Flow version by Vaadin 13 beta1, beginning of February.

[pleku]

The target is to ship all in a stable Flow version by Vaadin 13 beta1, beginning of February.

Postponed for Vaadin 14, should be part of a stable Flow version around the beginning of March.

[pleku]

As an update here, Vaadin 14.0.0 did not contain the flow-dnd module due to an issue with Firefox not working for dragging web components #5606. The fix is included in Firefox 68 and DnD is now working for it, which means that flow-dnd can be included into upcoming 14.1 release (my guestimate would be on September).

The flow-dnd is however already available as a separate artifact. It can be added to any 14.0 project as an add-on by adding the following dependency:

  <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>flow-dnd</artifactId>
      <version>2.0.7</version>
  </dependency>

[pleku]

Closing as the parts that are [x] above are to be shipped with 14.1.

The remaining features have been split into their own issues (see above), please go comment in those what you _actually need_ and _what use case do you need it for_. We can enable those in further 14.x minor releases.