How to Use the Drag-and-Drop Interface on a Paragraph Field in Drupal

The drag-and-drop feature on Drupal's paragraph field lets you rearrange paragraph items easily.

This tool is great for working with nested paragraphs. Instead of recreating paragraphs, you can simply move them to your desired location.

To take advantage of this, ensure your paragraph field is set to the “Paragraphs (Stable)” widget, not “Paragraphs Legacy”.

⬇️ Watch the video.

Here's a simple guide:

1. Navigate to the Manage Form Display page. This page should be related to an entity with a paragraph field.

2. Set the widget to “Paragraphs (Stable)", not “Paragraphs Legacy”.

3. Open a page for editing and click the dropdown toggle icon. You'll see the “Drag & drop” option - activate it.

4. Hit the handle icon and move the paragraph to the desired spot.

5. You can also move paragraph items nested within other paragraphs.

6. After rearranging the items, hit “Complete drag & drop” to secure your changes.

Now you have the ability to move paragraphs around.

#drupal #webdev