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.items property of the grid-dragstart event
is an array containing all items getting dragged.
The detail.item 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:
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, override the grid's formatDragData function. It receives the list of dragged
items as arguments and returns the payload as a string representation.
Hint: Try dragging the grid's rows to the grid of the same demo but on another browser window.