Skip to content
This repository has been archived by the owner on Mar 1, 2023. It is now read-only.

Latest commit

 

History

History
33 lines (17 loc) · 1.11 KB

drag-and-drop.mdx

File metadata and controls

33 lines (17 loc) · 1.11 KB

Simple Drag and Drop

Picking things up

When a user picks up an item, via PICK_UP, we enter the dragging state. The item they pick up is saved in context under itemBeingHeld.

When the dragged item reaches the intersection of another item (i.e. is dragged over it) we call the DRAG_REACHED_INTERSECTION event, which assigns the new intersection to context under itemBeingHeld.

When the user drops the item, via DROP, the list is rearranged and assigned into context.

Test cases

Swapping items 1 and 2

Pick up first item: PICK_UP.

Cross over second item: DRAG_REACHED_INTERSECTION.

Drop item: DROP.

Numbers one and two of the data list should have swapped places.

Swapping items 1 and 3

Pick up first item: PICK_UP.

Cross over third item: DRAG_REACHED_INTERSECTION.

Drop item: DROP.

The first item should now be at the end.