Anatomy

List Header: Required. Used as a label for the draggable list.
List Item: Required. Used to show the various items on the list.
States

Default
Hover
Drag
Best Practices
Confirm users expect it
Dragging is physically demanding and can be inefficient, imprecise, and error-prone over long distances. Understand the users’ mental model of the action so you know they expect to use it, and observe in usability tests whether they try to drag (without asking them about it directly).
Try to provide single pointer alternative
Any functionality that uses dragging must also be achievable with a single pointer without dragging, unless dragging is essential. This is a requirement according to WCAG 2.2. Alternatives such as up/down buttons or a move menu work well.
Define the consequence
Does reordering change priority, execution sequence, display order for others, or just personal arrangement? Users should be able to tell what moving an item will change.
Nested scrolling
Check that dragging in a scrollable panel inside a scrollable page scrolls the right container, and that auto-scroll works near the edges.
Sorting and filtering
When a sort is applied, either disable manual reordering or switch to a “Custom order” sort mode the moment someone drags. When the list is filtered, decide what a move means: is it relative to the visible items or to the full list? Disabling dragging while a filter is active is a common practice.
More
Additional Reading
Drag–and–Drop: How to Design for Ease of Use https://www.nngroup.com/articles/drag-drop/
Dragging Movements (Level AA) https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements
Atlassian Design System: Pragmatic drag and drop, Design guidelines https://atlassian.design/components/pragmatic-drag-and-drop/design-guidelines
Apple Human Interface Guidelines: Drag and drop https://developer.apple.com/design/human-interface-guidelines/drag-and-drop