An unstyled div that can be clicked and dragged to change an "X" or "Y" value,
e.g. representing a priority on PrioritiesDiagram, or the size of a modal.
Draggable does not know or care about the meaning of the x and y values it changes.
One example usage can be found in SplitPane, where it is used to alter the size
of a different element.
Typically one should set a cursor, e.g. with style={{ cursor: 'col-resize' }},
and also tabIndex={0} so that the drag handle can get the keyboard focus,
which allows the escape key to cancel the drag by setting the x/y value back to
what it was when the drag started.
An unstyled div that can be clicked and dragged to change an "X" or "Y" value, e.g. representing a priority on PrioritiesDiagram, or the size of a modal.
Draggable does not know or care about the meaning of the x and y values it changes. One example usage can be found in
SplitPane, where it is used to alter the size of a different element.Typically one should set a cursor, e.g. with
style={{ cursor: 'col-resize' }}, and alsotabIndex={0}so that the drag handle can get the keyboard focus, which allows the escape key to cancel the drag by setting the x/y value back to what it was when the drag started.