3.3.2 - Drag & Drop
Introduction
Drag and drop facilities are used in ScheduleJS to move an activity on the same row or from one row to another. All other editing operations are handled with standard mouse events (pressed, dragged). The default way to initiate a drag and drop operation is to move the mouse cursor into the center of an activity while pressing the SHIFT or ALT or CMD/CTRL key. See also 3.3.4 Activity Editing. The drag and drop will terminate once the user releases the mouse button.
Events
Just like all the other editing operations drag and drop will also trigger several events during its execution. The following table lists them:
| Event Type | Description |
|---|---|
DRAG_STARTED DRAG_ONGOING DRAG_FINISHED | These event types are fired if the editing operation is EditModeEnum.DRAGGING |
VERTICAL_DRAGGING_STARTED VERTICAL_DRAGGING_ONGOING VERTICAL_DRAGGING_FINISHED | These event types are fired if the editing operation is EditModeEnum.DRAGGING_VERTICAL |
The edit mode DRAGGING_HORIZONTAL does not use native browser drag and drop. Hence the event types HORIZONTAL_DRAG_STARTED / ONGOING / FINISHED don't use Drag and Drop functionalities.
Drag And Drop Info Property
A special method graphics.getDragAndDropInfo() is available on graphics to monitor the drag and drop operation. This is in addition to the standard event types mentioned above. The info stored in this property provides the application with the most important information required about the dragged activity.
| Method | Description |
|---|---|
info.getActivityBounds(): ActivityBounds | The bounds of the dragged activity (contains an ActivityReference and the actual activity). |
info.getActivityRef(): ActivityRef | The ActivityReference for the current Activity. |
info.getOffset(): { x: number, y: number } | Gives x and y offset of the location you clicked on the activity from the upper left corner of the activity. |
info.getPointerEvent(): PointerEvent | The pointer event for the actual event. |
info.getRow(): Row | The Row of the Activity. |
info.getTimeInterval(): TimeInterval | Start and End time for the current Activity. |
Drop Layer Provider
Drag and drop operations can be performed between two different Layers. By default a dropped activity will be placed on the same Model Layer as the one where is was dragged from. But if the target Gantt chart does not contain that Model Layer then the application needs to be told which Model Layer to use as the new home for the activity. This can be accomplished by using graphics.setDropLayerProviderCallback(info => targetLayer).
const graphics = this.gantt.getGraphics();
graphics.setDropLayerProviderCallback(info => targetLayer); // Switch the Model Layer to targetLayer, info is of type DragAndDropInfo. The default implementation of this callback looks like this:
const callback = (info) => info.getActivityRef().getLayer(); // Don't change the Model Layer.If the drop layer provider returns no layer or if the returned layer is not a layer that was added to the target Gantt chart / graphics then we will see messages like this.
- "The drop layer provider has returned no layer for the dropped Activity"
- "The drop layer provider has returned a layer that does not exist in the Gantt chart"