> For the complete documentation index, see [llms.txt](https://yapi-plugin.gitbook.io/easy-drag-and-drop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yapi-plugin.gitbook.io/easy-drag-and-drop/quick-start.md).

# Quick Start

Quick Start To Use Easy Drag and Drop Plugin

### Drag and Drop Plugin Include 2 Main Core Script

 ![](https://561724012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fnd69P9wF3EfYE8LjrgZj%2Fuploads%2FwAnNuNtwj93sZTFKytEg%2Fimage.png?alt=media\&token=63101ecb-b3e1-4020-b085-4958c1c63250)

    **DragObj** - Drag this c# script into the UI Element to drag the element.

     **DropSlot** - Drag this c# script into the UI Element to drop the Drag object

![Example Drag and Drop GIf](https://561724012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fnd69P9wF3EfYE8LjrgZj%2Fuploads%2FWq3PzRlk40aFeZgDzgAY%2Fflows23.gif?alt=media\&token=4c5ace74-b6c9-4307-b5f0-3c2ebd4f9c6e)

### - DragObj -

![](https://561724012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fnd69P9wF3EfYE8LjrgZj%2Fuploads%2FJyRKi9PkH8Nbr4oi6r5t%2Fimage.png?alt=media\&token=6d504658-9c8e-45f2-9a7a-b5a1d7a1c826)

<details>

<summary> <strong>DropObj Set-up Variable Description</strong></summary>

#### - Main Canvas Name -

The main canvas name of the drag object, this is require for the raycast pointer.

![](https://561724012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fnd69P9wF3EfYE8LjrgZj%2Fuploads%2FAVBSxSnwhiFRiJZ5Ddav%2Fimage.png?alt=media\&token=3752628b-4042-4ed8-b34d-af30777a5eb2)

#### - Is Return Position -

True - the draggable object will return to it original position.

False - the draggable object will stay at the pointer drop position.

#### - Drop As First Sibling -

True - the draggable object will become a first sibling of the drop parent

False - the draggable object will be the last sibling of the drop parent.

#### - Obj Info Component -

A c# script component that containt the data structure of the draggable object. It will be store inside the DragObj and thus pass it to DropSlot for further usage.

</details>

### - DropSlot -

![](https://561724012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fnd69P9wF3EfYE8LjrgZj%2Fuploads%2F6QSGrWFukMuiqTC6d6yN%2Fimage.png?alt=media\&token=85e781b0-a67c-4974-83b4-968a6280d840)

<details>

<summary>DropSlot Set-up Variable Description</summary>

#### - Main Canvas Name -

The main canvas name of the drag object, this is require for the raycast pointer.

#### - Set Drop Obj Parent -

True - the draggable object change it parent to **Parent Location**

False - the draggable object will remain it original parent when drop.

#### - Set Drop Object Position -

True - the draggable object change it position to drop slot transform position

False - the draggable object will return to its original position

</details>

<details>

<summary>DropSlot Inherient</summary>

Luckily, You can easily inherient the **DropSlot** script for further usage.

Example of inherient script in the demo scene:

```csharp
public class DropSlotDemo : DropSlot
    {
        public DataInfoDemo dataInfoDemo;
        public bool isOverrideOnDrop = true;
        public override void OnDrop(PointerEventData eventData)
        {
            base.OnDrop(eventData);
            if (!isOverrideOnDrop) return;
            var model = (DataInfoDemo) DropObj.m_ObjInfoComponent;
            dataInfoDemo.Initialize(model);
        }
    }

```

</details>