# useSortableElement

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.