How to reorder documents by dragging in Sanity document lists?

Good news! You're not limited to just using an order ID field. Sanity has an official plugin called Orderable Document List that lets you drag and drop documents to reorder them directly in the Studio.

How to Use Drag-and-Drop Ordering

Install the plugin with:

npm i @sanity/orderable-document-list

Once installed and configured, you'll be able to manually reorder documents by dragging them up or down in your document list. The plugin manages this behind the scenes using an orderRank field, so you don't have to manually maintain order IDs yourself.

When to Use Each Approach

Use the Orderable Document List plugin when:

• You want a simple, visual way to order documents
• Your content editors need to manually control ordering
• You have small to medium-sized document collections

Use a manual order field with orderBy when:

• You need different ordering schemes in different contexts
• You want to programmatically control ordering
• You need more complex sorting logic

The plugin is definitely the more user-friendly option for most cases where you need manual ordering. It's maintained by the Sanity team and works well with Studio v3. The ordering it creates can also be queried from your frontend applications, so the order you set in Studio will be reflected on your site.

Before this plugin existed, people had to use workarounds like wrapper documents with reference arrays or manual order fields, but the plugin streamlines the whole process considerably. You can find more details in the plugin documentation.