Reorderable List Component

[zphrs]

🚀 Feature request

It would be awesome to have a Reorderable (aka drag and drop) list component.

Draggable TODO list; from GitHub's blog post on drag and drop

Happy to do the implementation myself, just wanted to first post this as a feature request before I get started to make sure that y'all would be okay with me taking a stab at adding this to zag.

🧱 Problem Statement / Justification

Often resortable list and draggable card components are used to allow a user to customize the ordering of a site's content, including their own user-generated content. This component is powerful in giving a user more control over their app's layout.

✅ Proposed solution or API

I was thinking this could be (at least some of) the API:

<ul> <!-- root -->
  {items.map((item)=>
    <li key={item.value}> <!-- item -->
      <button>::</button> <!-- draggable marker & button trigger to enter "drag" mode/open popup -->
      <!-- menu opened by button -->
      <Menu items={["move up", "move down", "move to top", "move to bottom"]}></Menu> 
      <span> {item.label} </span> <!-- content -->
    </li>
  }
  <div></div> <!-- marker - absolutely positioned element which shows where in the list the element will end up  -->
</ul>

There would be an announcement div added to the root by the state machine to assist with accessibility -- i.e. informing a keyboard user how to move items with their keyboard.

While I imagine that throughout my implementation I will find necessary additions to the api, here is what I have thought of thus far which should be the aspects of the API unique to the reorderable list component: There would be an onDrop event listener which would provide the value of the item moved and the index which the item is now at. Component code would be responsible with actually persisting that movement into the items list when the component receives a call to onDrop, similar to how the combobox works. Furthermore an onDragStart event will trigger when an element starts to be dragged, onDragMove when the dragging object is moved, and an onDragOver event will trigger whenever the dragging element's potential new position in the list changes, indicating its new prospective index. The onDragOver event would allow for "optimistic" reordering of the list.

As for styling, items would get data-state="dragging|dropped" to indicate its dragging status alongside data-highlighted to indicate when a list element is tabbed over. data-state would be set for both drags initiated by pointer and drags initiated by keyboard activation of the drag mode. Furthermore, the marker component will be positioned in between the components which the dragging element would end up between if it were dropped immediately. The marker component should have a vibrant background set with styling to ensure that it is easily noticeable as a marker of where the new element might end up.

Meanwhile the button trigger and the menu would inherit both the data markers and the events from the Menu component.

When a component is being dragged, a placeholder element should take its place in the list to avoid layout shift. The placeholder should be the same width and height as the element being dragged. Furthermore, the dragging component's size should be set to be the same as it was in the list before it started being dragged and the dragging component's position should be transformed with the transform css property as the element gets dragged around the page.

↩️ Alternatives

I considered using the listbox component but I realized it would take significant effort to add reordering to it. I also considered simply implementing the component just for me using just the Zag Menu component but I realized that I would a) likely do a lot of work which only I would use and b) would probably benefit from having a state machine to ensure the design is correct.

📝 Additional Information

Here is some prior art:

• SalesForce
• GitHub Blog
• Harris Schneiderman with Deque Systems who made Dragon Drop
• James Edwards with TGPi - note that this is more drag and drop between multiple lists rather than a reorderable list
• Sigute with Microsoft - specifically for mobile devices

[segunadebayo]

Love the proposal @zphrs

An alternative name is “SortableList”. Feel free to give this a shot in a PR.

When you have something, I’ll review and help shape it as needed.

[zphrs]

Thank you for taking a look and more generally for all your work on zag! I will (hopefully) have a PR for you in a few weeks or so 🫡