# GridDragAndDrop

**Category:** Features/Sort/Drag and Drop

## Design

### Description

Enables [drag and drop](./?path=/story/features-sort-drag-and-drop--overview) functionality on a [`Grid`](./?path=/story/base-components-collections-grid-grid--grid) component.

#### Usage

1. Define a [`Grid`](./?path=/story/base-components-collections-grid-grid--grid) component.
1. Import and pass the `GridDragAndDrop` component to the `dragAndDrop` prop on the `Grid`.
1. Define the relevant drag and drop props on the [`Grid`](./?path=/story/base-components-collections-grid-grid--grid&tab=API):

      * `dragAndDropSubmit`
      * `dragAndDropCancel` (optional)
      * `dragAndDropBulkSubmit` (optional)
      * `dragAndDropCategories` (optional)
      * `dragAndDropReorderModeToolbar` (optional)


```tsx
import { GridDragAndDrop } from '@wix/patterns';
```

### Grid

Drag and drop items in a grid.

```tsx
import React from 'react';
import { CollectionPage } from '@wix/patterns/page';
import {
  GridDragAndDrop,
  useOptimisticActions,
  useGridCollection,
  Grid,
  ToolbarTitle,
  CursorQuery,
} from '@wix/patterns';
import { tasks } from '@wix/crm';

function GridExample() {
  const { queryTasks, moveTaskAfter, countTasks } = tasks;

  const grid = useGridCollection<tasks.Task>({
    queryName: 'tasks-Grid',
    paginationMode: 'cursor',
    itemKey: (item) => item._id as string,
    itemName: (item) => item.title as string,
    fetchData: async (query: CursorQuery) => {
      const { limit, cursor } = query;

      let queryBuilder = queryTasks().limit(limit);

      if (cursor) {
        queryBuilder = queryBuilder.skipTo(cursor);
      }

      return queryBuilder.find().then((res) => {
        const { items = [], cursors } = res;
        return {
          items,
          cursor: cursors.next,
        };
      });
    },
    fetchTotal: async (_query: CursorQuery) => {
      const filter = {};
      return countTasks({ filter }).then((res) => res.count as number);
    },
    fetchErrorMessage: ({ err }) => String(err),
  });

  useOptimisticActions(grid.collection);

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header title={{ text: 'Tasks' }} />
      <CollectionPage.Content>
        <Grid
          title={<ToolbarTitle title="Tasks list" />}
          state={grid}
          renderItem={(task: tasks.Task) => ({
            key: task._id,
            primaryActionProps: { label: task.source?.sourceType },
            title: grid.collection.itemName(task),
          })}
          search={false}
          dragAndDrop={GridDragAndDrop}
          dragAndDropSubmit={(event) =>
            moveTaskAfter(event.from.item._id as string, {
              beforeTaskId: event.after
                ? (event.after.item._id as string)
                : null,
            })
          }
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

## BI

### Events

  Event   |   Description   |
--------- | --------------- |
[144:138](https://bo.wix.com/data-tools/bi-catalog-app/event/144:138) | Sent when a user clicks on an item and tries to drag it, in order to sort the items manually
[144:139](https://bo.wix.com/data-tools/bi-catalog-app/event/144:139) | Sent when a user finish to drag an item
[144:140](https://bo.wix.com/data-tools/bi-catalog-app/event/144:140) | Sent when a user finish to drag items but those changes weren't update in the server from different reasons
[144:141](https://bo.wix.com/data-tools/bi-catalog-app/event/144:141) | Sent when a user clicks on a "try again" CTA he gets in an error notification



### Component load events
Event   |   Description   |
--------- | --------------- |
[144:110](https://bo.wix.com/data-tools/bi-catalog-app/event/144:110) | Sent when a Wix Patterns component starts loading
[144:111](https://bo.wix.com/data-tools/bi-catalog-app/event/144:111) | Sent when a Wix Patterns component is done loading


#### 🐪 Couldn't find what you need?
* Check our [BI Catalog](https://bo.wix.com/data-tools/bi-catalog-app?viewId=all-items-view&selectedColumns=src%2Cevid%2Cname%2Cowner%2Cproduct%2CuserType+false%2CdateUpdated%2CdateCreated+false%2CcreatedBy+false%2Cstatus&source=%5B%7B%22id%22%3A%22144%22%2C%22name%22%3A%22144+-+Cairo%22%7D%5D)
* Contact us on [#cairo-bi](https://wix.slack.com/archives/C03N53KURH9)