---
title: "Dragging | Features"
description: "ZingGrid has built-in dragging to hide and reorder columns."
url: https://www.zinggrid.com/docs/features/dragging
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/dragging.md
mode: provenance
representation: markdown
origin_response_id: 4b007fa79255f374e050363993f9722f
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.684Z
version_nonce: 35490268f19ce04656431107589220ff
generated_at_utc: 2026-10-24T01:34:28.279Z
response_nonce: 05ed6dc865dabc0d541e727903497311
```

# Dragging

ZingGrid has built-in dragging features to hide and reorder columns. To enable column dragging, simply add `column-drag` to the `<zing-grid>` tag.

## Column Hide

To hide columns by dragging them off the grid, include `[column-drag-action="hide"]` in `<zing-grid>`, like so:

```html
<zing-grid column-drag column-drag-action="hide"></zing-grid>
```

### Drag to Hide Columns Grid
Here is a complete grid with dragging to hide columns enabled:

[Example code](https://app.zingsoft.com/demos/embed/GWU99DVY)

## Column Reorder

To reorder columns by dragging them around the grid, include `column-drag-action="reorder"` in `<zing-grid>`, like so:

```html
<zing-grid column-drag column-drag-action="reorder"></zing-grid>
```

### Drag to Reorder Columns Grid
Here is a complete grid with dragging to reorder columns enabled:

[Example code](https://app.zingsoft.com/demos/embed/0O0TOHRE)

## Column Hide and Reorder

To both hide and reorder columns by dragging them off the grid, include `[column-drag-action="both"]` in `<zing-grid>`, like so:

```html
<zing-grid column-drag column-drag-action="both"></zing-grid>
```

### Drag to Hide and Reorder Columns Grid
Here is a complete grid with dragging to both hide and reorder columns enabled:

[Example code](https://app.zingsoft.com/demos/embed/HJOILH2M)

## Card Mode

Column hide and reorder also works in card mode. Dragging a card item (header and content) on one card applies the change to the rest of the cards.

### Drag to Hide and Reorder in Card Mode
Here is a complete grid demonstrating column hide and reorder in card mode:

[Example code](https://app.zingsoft.com/demos/embed/JNBLQXJM)

## Force Visibility

By default, the drag handles only appear when you hover over the column's header cell. To override this and make the handles always appear, add `column-drag-persistent` to `<zing-grid>`, like so:

```html
<zing-grid ... column-drag column-drag-persistent>
```

For individual columns, add `drag-persistent`:

```html
<zing-grid column-drag>
  <zg-colgroup>
    <!-- Handle appears on hover -->
    <zg-column ...>
    <!-- Handle always shows -->
    <zg-column ... drag-persistent>
  </zg-colgroup>
</zing-grid>
```

Or to disable, set it to "disabled":

```html
<zing-grid column-drag column-drag-persistent>
  <zg-colgroup>
    <!-- Handle appears on hover -->
    <zg-column ... drag-persistent="disabled">
    <!-- Handle always shows -->
    <zg-column ...>
  </zg-colgroup>
</zing-grid>
```

### Column Drag Handle Persistent
Here is a complete grid demonstrating setting the persistence of drag handles:

[Example code](https://app.zingsoft.com/demos/embed/YIQP1NFK)