# Quick Start

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

&#x20;![](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)

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

&#x20;    **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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yapi-plugin.gitbook.io/easy-drag-and-drop/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
