1.3.1. Drag and drop
- 1 Overview
- 2 Implementation
- 2.1 General
- 2.1.1 Scheduler target name
- 2.1.2 Dragging CSS class
- 2.1.3 Can drag?
- 2.2 Preview/Proxy
- 2.2.1 Sanitizing event title
- 2.2.2 Style
- 2.2.3 Color
- 2.1 General
Overview
Any Mendix item outside the scheduler can be dragged into it using our drag-and-drop helper widget. This allows for intuitive and user-friendly scheduling of unplanned items, providing you with numerous additional UX options.
For an example see: Drag and drop
Implementation
In the example above we use the the drag helper widget in a list. As you see we can place any Mendix content inside the draggable content section.
General
Scheduler target name
The scheduler target name is the name of the target widget, which can be found under the Common tab of the target Scheduler widget. It is recommended to rename this to something meaningful (in our case, we used dropScheduler
).
Dragging CSS class
By default, the class .b-dragging
will be added to the draggable content (the Mendix widgets you added to the drop zone) when a user starts the dragging process. The .b-dragging
class reduces the opacity of the draggable content, but you can override this class to disable the opacity change or add your own custom styling (e.g., display: none
).
Can drag?
This property can dynamically override if an element is draggable. If set to false the drag behavior will be disabled and class .b-dragging-disabled
will be added to the widget container.
Â
Preview/Proxy
This is where you can define everything regarding the proxy object. This is the preview element you see when dragging something.
Sanitizing event title
By default, the event title content is filtered to prevent cross-site scripting (XSS). If you require greater control and do not wish to filter this content, you can disable it here. However, please bear in mind that in such cases, you should avoid displaying any user input in the event content.
Style
The default event style can be chosen and then overridden by the event style, if desired. The event style can also be left blank. If left blank, the default event style will be applied. To apply an event style, you can use a string or the provided enumeration ENUM_EventStyle
found in the resources folder of the scheduler module. Like so:
getKey(BizzomateScheduler.ENUM_EventStyle.plain)
Or when you have an attribute on your object that uses the style enum:
getKey($currentObject/EventStyle)
Color
The default event color can be chosen and then overridden by the event color, if desired. The event color can also be left blank. If left blank, the default event color will be applied. To apply a event color, you can use a string or the provided enumeration ENUM_Color
found in the resources folder of the scheduler module. Like so:
getKey(BizzomateScheduler.ENUM_Color.cyan)
Or when you have an attribute on your object that uses the color enum: