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