> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecomwize.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Drag and Drop

> Reorder sections on your page by dragging them into new positions using the canvas or the layers panel.

## Overview

EcomWize uses a drag-and-drop system to let you reorder sections on your page. You can drag sections directly on the canvas or use the layers panel for an alternative reordering experience.

## Dragging sections on the canvas

<Steps>
  <Step title="Hover over a section">
    Move your cursor over the section you want to move. A **drag handle** (grip icon) will appear on the section, typically near the top.
  </Step>

  <Step title="Grab the drag handle">
    Click and hold the drag handle. Your cursor will change to a grabbing hand, and a **ghost preview** (a semi-transparent copy of the section) will appear to show what you are dragging.
  </Step>

  <Step title="Drag to the new position">
    Move the section up or down. As you drag, **drop zones** will appear between other sections, indicating where the section will be placed if you release.
  </Step>

  <Step title="Release to drop">
    Let go of the mouse button to drop the section into its new position. The page will instantly update to reflect the new order.
  </Step>
</Steps>

<Tip>
  The drag handle is the small grip icon (six dots arranged in two columns) that appears when you hover over a section. Always grab the drag handle rather than clicking on the section content, which will select the section for editing instead.
</Tip>

## Visual feedback during drag

While dragging, the builder provides clear visual cues:

* **Ghost element** -- A semi-transparent copy of the section follows your cursor, showing exactly what you are moving
* **Drop indicator** -- A highlighted line or gap appears between sections to show where the dragged section will land
* **Opacity change** -- The original section becomes partially transparent while being dragged, so you can easily tell it apart from the ghost

## Keyboard support

You can also reorder sections using the keyboard for accessibility:

1. Select a section by clicking on it or navigating to it
2. Use the **arrow keys** to move the section up or down in the sort order
3. The section will swap positions with its neighbor in the direction you press

<Note>
  You can Tab to the drag handle and use arrow keys to change position.
</Note>

## Using the layers panel for reordering

The [Layers panel](/page-builder/layers-panel) provides an alternative way to reorder sections. Instead of dragging sections on the full canvas preview, you drag compact layer items in a list view:

<Steps>
  <Step title="Open the layers panel">
    Click the **Layers** icon in the sidebar to open the layers panel.
  </Step>

  <Step title="Drag a layer item">
    Each section is represented as a compact row showing its type name and order number. Grab the drag handle on the left side of any layer item.
  </Step>

  <Step title="Drop in the new position">
    Drag the item up or down in the list and release. The canvas will immediately update to reflect the new section order.
  </Step>
</Steps>

<Tip>
  The layers panel is often easier to use for reordering when you have many sections or when sections are very tall. You can see your entire page structure in a compact list and make quick changes.
</Tip>

## Touch support

Drag and drop works on touch devices as well:

* **Touch and hold** the drag handle to begin dragging
* **Slide your finger** up or down to move the section
* **Lift your finger** to drop the section in its new position

The same visual feedback (ghost element, drop zones) appears on touch devices.

## Important notes

<Warning>
  Every reorder action is recorded in the [undo/redo history](/page-builder/undo-redo). If you accidentally move a section to the wrong place, press `Ctrl/Cmd + Z` to undo the change immediately.
</Warning>

* You can only reorder sections **vertically** (up and down). Sections always span the full width of the page.
* The maximum number of sections per page is **25**. Reordering does not change the section count.
* Reordering is purely visual/structural -- it does not affect the content or configuration of any section.