# useSortableContainer

need to write

this hooks for designed to make some normal element as sortableElement.
in simple words, If you need to do some element as sortableElement then you can use this hook.

### ok, How to use ?

example usage below given.

```jsx
import { useSortableElement } from '@zohodesk/react-dnd';
function MySortableElement(props) {
  const {
    groupName,
    index,
    onSortStart,
    onSort,
    onSortEnd,
    delay,
    isDisable,
    hasMargin,
  } = props;
  const {
    ref,
    isDragging,
    isDraggingHappened,
    position,
    positionStyle,
  } = useSortableElement({
    groupName,
    index,
    onSortStart,
    onSort,
    onSortEnd,
    delay,
    isDisable,
    hasMargin,
  });

  return (
    <div
      ref={ref}
      style={positionStyle}
      className={`${isDragging ? 'shade' : 'normal'} ${
        isDraggingHappened ? 'animate' : ''
      }`}>
      sortableElement
    </div>
  );
}
```

#### Explanation

if you need sortableElement then just use **useSortableElement**.

## useSortableElement

**arguments** : **`SortableElementOptions`** (it's full details below).

**return** : `Object`

#### Return Value Object

- **ref** `Function` you must send element ref to this function or make it as ref of that element ref.
- **isDragging**: `Boolean` , this will indicate `your` element is dragging or not.
- **isDraggingHappened**: `Boolean` , this will indicate `any` element is dragging or not.
- **position**: `Position` this was mouse coordinates. (below explanation of `Position`).
- **positionStyle**: `Object` this is relative position css style from it's start position.

### Position

it was Object.
**it's member's below.**

- **relative** `{ x: Number, y: Number }` this is relative position from it's start position.
  intial it will null.
- **absolute** `{ top: Number, left: Number }` this is absolute position from it's SortableContainer.
  intial it will null.

#### SortableElementOptions

it was Object.

| member Name |   Type   | Default Value | Required |
| :---------: | :------: | :-----------: | -------: |
|  groupName  |  String  |       -       |      Yes |
|    index    |  Number  |       -       |      yes |
| onSortStart | Function |       -       |      Yes |
|   onSort    | Function |       -       |       No |
|  onSortEnd  | Function |       -       |       No |
|    delay    |  Number  |       -       |       No |
|  isDisable  | Boolean  |       -       |       No |
|  hasMargin  | Boolean  |     false     |       No |

**it's member's below.**

- **`index`** **:** it was the element index in SortableContainer.
- **`onSortStart`** **:** this function for notify drag start event.<br />
  **arguments** :

  1. **index**: `Number` it was the element index in SortableContainer.
  2. **coordinates**: `{ mouseX: Number, mouseY: Number }` this was mouse coordinates.

  **return** : [DragStartOptions](useDragSource.md#dragstartoptions)

- **`onSort`** : this function for to notify drag event.<br />
  **arguments** :

  1. **index**: `Number` it was the element index in SortableContainer.
  2. **coordinates**: `{ mouseX: Number, mouseY: Number }` this was mouse coordinates.

  **return** : void

- **`onSortEnd`** : this function for to notify drag end event.<br />
  **arguments** :

  1. **index**: `Number` it was the element index in SortableContainer.
  2. **coordinates**: `{ mouseX: Number, mouseY: Number }` this was mouse coordinates.
  3. **isDropped**: `Boolean` this will indicate the drag element droped on some ware.
  4. **isMounted**: `Boolean` this will indicate the drag element is in dom.

  **return** : void

- **`isDisable`** : type **`Boolean`** **;** this boolean for disable dragging events.
- **`groupName`** : type **`String`** **;** this is for mention which type of drag element it was.
- **`delay`** : type **`Number`** **;** this is for drag start delay for touch device.
- **`hasMargin`** **:** this element has margin.