How to add drag-and-drop reordering for posts in Sanity Studio?

39 replies
Last updated: May 20, 2021
Hello all, I have whats potentially a dumb question but a client has asked if there is a way for them to easily reorder their posts in the admin panel of Sanity.
They are thinking of the ability to drag and drop items in section like the screenshot attached to whatever order they want, so dragging the post at the bottom to be the one at the top, so an easy to use sort order feature.

Was just wondering what the easiest way of doing this for them might be?

Thanks as always!
AI Update

Not a dumb question at all! This is a common need, and there's an official Sanity plugin that does exactly what your client wants.

You'll want to use the @sanity/orderable-document-list plugin. It adds drag-and-drop functionality directly in the Studio so editors can reorder documents by simply dragging them up or down in the list.

Here's how to set it up:

  1. Install the plugin:
npm i @sanity/orderable-document-list
  1. Add an orderRank field to your schema (for the document type you want to make orderable, like "post"):
{
  name: 'orderRank',
  title: 'Order Rank',
  type: 'string',
  hidden: true, // hides it from the editor UI
}
  1. Configure your desk structure to use the plugin. In your sanity.config.ts (or desk structure file):
import {orderableDocumentListDeskItem} from '@sanity/orderable-document-list'

// In your structure configuration:
orderableDocumentListDeskItem({
  type: 'post',
  title: 'Posts',
  S,
  context
})

The plugin works by managing an orderRank field behind the scenes. Once set up, your client will see a drag handle next to each document and can simply drag posts to reorder them.

Important note: This creates a manual sort order that you can query in your frontend. You'll need to use the orderRank field in your GROQ queries to respect this ordering:

*[_type == "post"] | order(orderRank)

This is much cleaner than older workarounds like adding manual "order" number fields or creating wrapper documents with reference arrays. The plugin is maintained by Sanity and works great for most use cases where you need manual document ordering.

Show original thread
39 replies
My guess is, probably not something easily achieved.. maybe they would be happy with sorting by a different property?
user M
- you mean make an array of references or something like that?
I mean, first you could just either sort by something like creation time, or last modified time.. one of those might give a pleasing order
and if that's really not enough, maybe something as simple as an "importance" field?
to add some more control over relative sorting
I guess it depends on why they want to see things in a certain order
maybe what they actually want is to have some groupings of posts.. and controlling the order to them seems like an easier way of doing that
They just want to chop and change the order of posts and other repeated elements in a simple GUI way - simple as that really.
do they want that to then be reflected in on the website?
Exactly that.
sorry, I was wrongly assuming this was just about how things looked in the studio..
So, another section has projects the client has created and they would want to change the order every now and then.
one idea, if it's not important to have EVERYTHING sorted.. have a document with an array of references to projects that is the "highlight" projects
anything not referenced there comes afterwards
I'm pretty sure sanity has some kind of a widget that lets you drag and drop an array of references
user M
- I was thinking along those lines too, just wanted to make sure I wasn't missing something obvious!
I'm new to sanity, but my instinct would be that that is the way to go
I'm pretty sure sanity has some kind of a widget that lets you drag and drop an array of references
I'm new to sanity, but my instinct would be that that is the way to go
I guess it depends on why they want to see things in a certain order
Cheers
user M
- appreciate your thoughts!
user M
- I was thinking along those lines too, just wanted to make sure I wasn't missing something obvious!
maybe what they actually want is to have some groupings of posts.. and controlling the order to them seems like an easier way of doing that
They just want to chop and change the order of posts and other repeated elements in a simple GUI way - simple as that really.
hold on a minute, looks like exactly what they want DOES exist..
do they want that to then be reflected in on the website?
Exactly that.
sorry, I was wrongly assuming this was just about how things looked in the studio..
So, another section has projects the client has created and they would want to change the order every now and then.
user M
Well, would you look at that... This is why I like to ask on here. Thanks so much! Will have a delve into that.

http://gph.is/14bAT3a
one idea, if it's not important to have EVERYTHING sorted.. have a document with an array of references to projects that is the "highlight" projects
anything not referenced there comes afterwards
I'm pretty sure sanity has some kind of a widget that lets you drag and drop an array of references
probably still worth keeping in mind that this is likely to stop being very usable when the number of documents gets to a certain point
finding any individual document will be hard, and you'll need to do a lot of dragging to move around
if you're ordering and selecting a limited number of documents in a "highlighted documents" reference array, you'll be able to search for specific documents
Oh for sure, the instance they need it for is relatively limited. I’ll get into the weeds with it but I just wanted to test the water of what there was before I did.
Thanks again, appreciate your time.
no worries, good luck, customer's always wrong 😉

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.

Was this answer helpful?