Switch on the rowsDraggable flag to make the grid's rows draggable with mouse (or touch).
Specifying dropMode enables dropping on top of the grid or grid rows.
Supported values for the dropMode are
Depending on rowsDraggable and dropMode configuration,
grid fires events during the different phases of drag and drop sequence.
By default, only one row gets dragged at once. Make the grid rows selectable, for example with the selection column helper, to enable dragging multiple rows at the same time.
The detail.draggedItems property of the grid-dragstart event
is an array containing the items in the visible viewport that are dragged.
The detail.dropTargetItem property of the grid-drop event
refers to the item of the grid row on which the drop occurred.
The detail.dropLocation property of the grid-drop event
indicates the position at which the drop event took place relative to a row. Depending
on the dropMode value, the drop location can be one of the following:
Hint: Try dragging users from the grid on the left on top of the users of the grid on the right to create a hierarchical structure.
Operating with the drag event text data enables you to process drag and drop between different application windows. The default payload of the drag event is generated from the visible grid columns and items as a line break separated list of tab-separated values.
The detail.data property of the grid-drop event
is the payload of the drag and drop operation.
To customize the drag event data, use the detail.setDragData function of the grid-dragstart event.
The function takes two parameters:
Note: "text" is the only data type supported by all the browsers the grid currently supports (including IE11).
Note: On multi selection, only the rows in the viewport are included in the drag operation.
Hint: Try dragging the grid's rows to the grid of the same demo but on another browser window.
When rows-draggable and drop-mode properties are set, by default, all the grid rows
can be dragged and dropped on top of. This can be controlled per row basis by using dragFilter
and dropFilter hook functions.
The dragFilter function receives information about the row as the argument and
should return a boolean value indicating whether dragging of the corresponding row should be enabled.
Respectively, dropFilter can be used for disabling dropping on top of specific rows.
Hint: Try changing the subordinates of the main level supervisors by dragging. The filters prevent