You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/@react-aria/dnd/docs/dnd.mdx
+5-6Lines changed: 5 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -19,10 +19,9 @@ import {Layout} from '@react-spectrum/docs';
19
19
exportdefaultLayout;
20
20
21
21
---
22
-
category: Drag and Drop
22
+
category: Concepts
23
23
keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
24
-
navigationTitle: Introduction
25
-
type: interaction
24
+
order: 10
26
25
---
27
26
28
27
# Drag and Drop
@@ -59,7 +58,7 @@ Many operating systems display drop operations in the form of a cursor change wh
59
58
<figcaptionid="drop-operation-caption"style={{fontStyle: 'italic'}}>Visual feedback for a copy drop operation.</figcaption>
60
59
</figure>
61
60
62
-
Collection components built with hooks such as [useListBox](useListBox.html), [useTable](useTable.html), and [useGridList](useGridList.html), support multiple **drop positions**. The collection may support a `"root"` drop position, allowing items to be dropped on the collection as a whole. It may also support `"on"` drop positions, such as when dropping into a folder in a list. If the collection allows the user to control the order of the items, it may also support `"between"` drop positions, allowing the user to insert or move items between other items. This is indicated by rendering a **drop indicator** between two items when the user drags over the space between them. Any number of these drop positions can be allowed at the same time and the component can use the types of the dragged items to selectively allow or disallow certain positions.
61
+
Collection components such as [ListBox](ListBox.html), [Table](Table.html), and [GridList](GridList.html) support multiple **drop positions**. The collection may support a `"root"` drop position, allowing items to be dropped on the collection as a whole. It may also support `"on"` drop positions, such as when dropping into a folder in a list. If the collection allows the user to control the order of the items, it may also support `"between"` drop positions, allowing the user to insert or move items between other items. This is indicated by rendering a **drop indicator** between two items when the user drags over the space between them. Any number of these drop positions can be allowed at the same time and the component can use the types of the dragged items to selectively allow or disallow certain positions.
@@ -74,9 +73,9 @@ Collection components built with hooks such as [useListBox](useListBox.html), [u
74
73
75
74
While drag and drop has historically been mostly limited to mouse and touchscreen users, keyboard and screen reader friendly alternatives are important for users who cannot use these interaction methods. For example, copy and paste can often be used as an alternative to drag and drop to allow the user to move an object from one location to another. However, copy and paste does not cover all of the possible interactions that drag and drop allows. For example, it is hard to specify an exact location to insert an item into a list on paste, or even know where pasting is accepted. Users must either already know where they can paste, or navigate aimlessly until they find a valid location.
76
75
77
-
React Aria implements keyboard and screen reader friendly interactions for drag and drop that provide full parity with the mouse and touch experiences. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to cycle between the drop targets that accept the dragged data, then press <Keyboard>Enter</Keyboard> to drop. <Keyboard>Escape</Keyboard> can be pressed at any time to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop. Screen reader announcements are included to help guide the user through this process. All of this is built into the [useDrag](useDrag.html) and [useDrop](useDrop.html) hooks.
76
+
React Aria implements keyboard and screen reader friendly interactions for drag and drop that provide full parity with the mouse and touch experiences. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to cycle between the drop targets that accept the dragged data, then press <Keyboard>Enter</Keyboard> to drop. <Keyboard>Escape</Keyboard> can be pressed at any time to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop. Screen reader announcements are included to help guide the user through this process. All of this is built into the [useDrag](useDrag.html) and [useDrop](useDrop.html) hooks, and components such as [DropZone](DropZone.html).
78
77
79
-
Collection components such as lists or tables are treated as a single drop target, so that users can easily tab past them to get to the next drop target without going through every item. Instead, within a droppable collection, keys such as <Keyboard>ArrowDown</Keyboard> and <Keyboard>ArrowUp</Keyboard> can be used to select a drop position, such as on an item, or between items. The exact interactions may vary depending on the layout of the collection component. Drag and drop for collections is implemented by the [useDraggableCollection](useDraggableCollection.html) and [useDroppableCollection](useDroppableCollection.html) hooks.
78
+
Collection components such as lists or tables are treated as a single drop target, so that users can easily tab past them to get to the next drop target without going through every item. Instead, within a droppable collection, keys such as <Keyboard>ArrowDown</Keyboard> and <Keyboard>ArrowUp</Keyboard> can be used to select a drop position, such as on an item, or between items. The exact interactions may vary depending on the layout of the collection component. Drag and drop for collections is implemented by the [useDraggableCollection](useDraggableCollection.html) and [useDroppableCollection](useDroppableCollection.html) hooks, which are built into in the [ListBox](ListBox.html), [Table](Table.html), and [GridList](GridList.html) components.
80
79
81
80
Draggable elements can sometimes have other interactions that conflict with the keyboard and screen reader interactions needed to initiate a drag, such as the <Keyboard>Enter</Keyboard> key. In these cases, an explicit **drag affordance** may be added. Keyboard and screen reader users can focus this element, and use it to initiate drag and drop for the parent item. In addition, this has the added benefit of making drag and drop more discoverable.
0 commit comments