# useDragSource

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

### ok, How to use ?

example usage below given.

```jsx
import { useDragSource } from '@zohodesk/react-dnd';
function MyDraggable(props) {
  const { onDragStart, onDrag, onDragEnd, isDisable, delay, groupName } = props;
  const [setDragSource, isDragging] = useDragSource({
    onDragStart,
    onDrag,
    onDragEnd,
    isDisable,
    delay,
    groupName,
  });

  return (
    <div ref={setDragSource} className={isDragging ? 'shade' : 'normal'}>
      draggable
    </div>
  );
}
```

#### Explanation

if you need draggable then just use **useDragSource**.

## useDragSource

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

**return** : `Array`[refFunc: *`Function`*, isDragging: *`Boolean`*]

#### Return Value Array

1. **refFunc** `Function` , you must send element ref to this function or make it as ref of that element ref.
2. **isDragging**: `Boolean` , this will indicate your element is dragging or not.

#### DragSourceOptions

it was Object.

| member Name |   Type   | Default Value | Required |
| :---------: | :------: | :-----------: | -------: |
| onDragStart | Function |       -       |      Yes |
|   onDrag    | Function |       -       |       No |
|  onDragEnd  | Function |       -       |       No |
|  isDisable  | Boolean  |       -       |       No |
|  groupName  |  String  |       -       |      Yes |
|    delay    |  Number  |       -       |       No |

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

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

  1. **coordinates**: `{ mouseX: Number, mouseY: Number }` this was mouse coordinates.

  **return** : _`DragStartOptions`_

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

  **return** : void

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

  1. **coordinates**: `{ mouseX: Number, mouseY: Number }` this was mouse coordinates.
  2. **isDropped**: `Boolean` this will indicate the drag element droped on some ware.
  3. **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.

#### DragStartOptions

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

|     member Name     |          Type          |   Default Value   | Required |
| :-----------------: | :--------------------: | :---------------: | -------: |
|  dragImageOffsets   |        `Object`        | { x : 0 , y : 0 } |       No |
|      dragImage      |     `HTMLElement`      |  currentElement   |       No |
|   dragElementInfo   |         `any`          |         -         |       No |
| dragPreviewRenderer |       `Function`       |         -         |       No |
|    hideDragImage    |       `Boolean`        |       false       |       No |
|     dragEffect      | `Enum("move"\|"copy")` |      "move"       |       No |

- **`dragImageOffsets`** **:** type **;** this Offset will used for , drag preview or drag ghost image how much distanced from mouse.<br/>
  **Object Shape** { x: `Number`, y: `Number`}
- **`dragImage`** **:** this element will be used for replace the drag ghost.
- **`dragElementInfo`** **:** this is colllected from you when the drag is happening, this was used to you for which element is dragging or dragging related information it has.
- **`dragPreviewRenderer`** **:** this function will return react element will be used for replace the drag ghost.
  and it's ;- <br/>
  **arguments** :

  1. **`dragPreviewProps`**: `DragPreviewProps` [more details](useDragPreview.md#dragpreviewprops).

  **return** : _`react element`_

- **`hideDragImage`** **:** this boolean for hide default drag ghost image.
- **`dragEffect`** **:** this is used for drag cursor.