Get help on Discord

Drag and drop ordering of content in Sanity.io discussed, with suggestions for implementation.

6 replies
Last updated: Apr 30, 2020
Also need to know wether you can re-order content via drag ‘n’ drop, any ideas on that?
AI Update

Yes! Sanity supports drag-and-drop reordering through the official Orderable Document List plugin.

You can install it with:

npm i @sanity/orderable-document-list

This plugin lets content editors drag and drop documents to reorder them directly within the Studio interface. It works by managing an orderRank field behind the scenes, so the ordering persists and can be queried from your frontend applications.

This is much more user-friendly than the old workarounds people used to use, like manually adjusting numerical order fields or creating wrapper documents with reference arrays. The plugin is particularly great for smaller to medium-sized document collections where manual ordering makes sense.

Important note: The built-in sort orders you can configure in Studio (like sorting by date or title) only affect how documents appear within the Studio itself - they don't automatically carry over to your frontend. The Orderable Document List plugin solves this by creating ordering data you can actually query and use in your application.

If you're also interested in visual editing capabilities, Sanity also has Visual Editing features that include drag-and-drop functionality for real-time content editing with live preview overlays.

Show original thread
6 replies
Sanity has an array type field that allows drag & drop ordering of items if that’s what you’re looking for? In the attached screenshot, the little hamburger-menu-like icons to the left of the content allow you to change the order of the individual items. These items can be all kinds of things, from simple images to more complex custom input components.
That’s super handy… thanks! Though does that apply to content types, as in can you sort order Posts by drag/drop, or is it just within some of the components in a single Post?
Just to clarify, if I’m calling Posts from the frontend… I can order by date etc, can I order by ‘sort order’ which would be the result of how Posts have been ordered via Drag/Drop in the admin?
This would only apply to an array field inside of a Post document in this case, not the actual ordering of Posts. However, you could set up some kind of workflow where, for example, you have a singleton ‘Blog’ document and automatically add references to new posts to an array field in that document. This would essentially enable drag & drop on a list of Posts, if that’s not too far-fetched a way to go. Also depends on the amount of Posts in this case I suppose.
If you do something like what I described above, you would get the Posts in the order defined in the array field, but you would have to query this singleton document and then resolve the references from the array to get the Post content. Does that make enough sense?
🙂
Although it might feel a bit cumbersome, one advantage of this approach is that you can define different sort orders for different situations, so you’re not tied to a single order.
There are also sort orders you can define for a document list, but those are just for how docs are ordered inside the Studio itself, not for the front-end.

Or you could sort on the front-end side by any other field you define, but that doesn’t enable the drag & drop functionality you seem to be looking for.
That is a more than acceptable solution, thanks so much for taking the time to get back to me. Cheers! 🙌

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?