Drag and drop for hierarchies

Release date: 5th February 2025

Hierarchies can be used to model anything from a page structure for a website to a structured list of product content. The drag and drop for hierarchies feature lets users move hierarchy nodes anywhere within a hierarchy, including within the same branch.

Drag and drop for hierarchies

You can now choose how you want to sort hierarchy nodes: using a pre-defined sort key, such as a ranking that the user has to enter for each content item, or allow the user to drag and drop nodes anywhere in a hierarchy. Previously you could drag and drop nodes between branches of a hierarchy, but not within the same branch.

The example below shows a hierarchy that has been updated to support the new feature. The "Womens" node is dragged to a new position on the same branch, together with its child nodes. The position of the other nodes in the branch (its siblings) is also updated.

See the hierarchies user guide for more details about moving nodes within a hierarchy.

Enabling drag and drop

In order to enable drag and drop within the same branch, you'll need to add a sort trait to your schema with a key of default and a sort path using the new position field in the content item metadata. position will be calculated automatically when the user drags a node to a new position.

"trait:sortable": {
    "sortBy": [
      {
        "key": "default",
        "paths": ["/_meta/hierarchy/position"]
      }
    ]
  }

Multiple content types in a hierarchy

If your hierarchy includes nodes created from multiple content types, then the schema for each node in a hierarchy must be enabled to support the new drag and drop feature. See sorting hierarchy nodes for more details.

Working with existing hierarchies

If you are already using hierarchies with your own default sort, such as a ranking property, you can leave your content type schemas unchanged. Everything will work as before, your existing sort will be used, and users will be able to drag and drop between branches in the hierarchy, but not between nodes on the same branch.

Updating your schemas

If you choose to use the new drag and drop feature, then you should update each schema used to create content in a hierarchy with the new sort trait and default sort key.

Once your schemas are updated, nodes will be initially be sorted in the order that you previously set up, but users will be able to drag and drop nodes to change their position. The position field for each node in a branch will be initialized the first time you add or drag a node within that branch. See updating your existing schemas for more information.

Updated schema example

The site menu schema example has also been updated to use the new default sort trait. You can add this schema example to your hub in Dynamic Content by choosing "Content type schemas" from the development menu, then "Create schema", and selecting "Start with an example" from the create schema window. Choose the "Site menu hierarchy" example from the Hierarchies category and "Use this schema".

Related pages

Hierarchy developer guides

About hierarchies

Sorting hierarchy nodes

Hierarchies user guide

Creating content type schemas for hierarchies