React Drag/Drop demo/starter

Category: Samples
Subcategory: Examples


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


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
  • 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.


Version: 3.1.1
Framework Version: 9.12.5
Release Notes: Version 3.1.1 of the widget
Version: 3.1.0
Framework Version: 9.12.5
Release Notes: Added scroll/zoom to function to the demo in the context menu
Version: 3.0.0
Framework Version: 9.12.2
Release Notes: Mendix 9.12, updated widget. With DB snapshot for easy start
Version: 2.4.0
Framework Version: 9.6.9
Release Notes: Added tablet navigation profile for touch backend
Version: 2.3.0
Framework Version: 9.6.5
Release Notes: Drag a selection area across the background to select markers.