Overview

Demo project for the React Drag/Drop widget. Get to know the widget. Helps you get started in your own project

Documentation

The React Drag/Drop widget provides Drag/Drop support using the new pluggable widget architecture.

This widget does take some getting used to. That is where this demo/starter app comes in. It is a working demo for these usecases:

• Drag items from a list of available items onto a parent or existing child items
• Drag items to reorder them
• Use a drag handle
• Control which item is allowed to be dropped on each container.
• Drag images onto a floorplan or similar and arrange the items on the canvas.
• Create a sidebar with template items.
• While dragging a template onto the canvas, show it correctly sized for the image and zoom setting.
• Allow single or multi selection of the items on the canvas
• Show a grid over the canvas
• Rotate image items by dragging a rotation handle
• Drag a selection area across the background to select markers
• Scroll/zoom to a marker or selection 

The demo project provides microflows you can copy and adapt to your situation.

It also provides Java action RetrieveObjectByGUID which allows retrieval of an object using a GUID, used a lot with this widget, usable in other situations too.

The actions use action variables to pass the date to the microflows. Reasons for using variables:

• For simple use cases, no context attributes required
• Makes it more clear which values are available for each action
• Reduces pages renders, noticable on complex pages or many markers on a floorplan