How to Create a Draggable Component with React

Tram Ho

Hello guys, it’s me again

Already when doing a project, enh you encounter a task that is to move components on the screen ??? Today I will show you how to make a simple Draggable using the library https://www.npmjs.com/package/react-draggable.

Let’s get it

Step 1: Let’s create an app:

Then we continue the package:

Step 2: You continue to import:

Once installed, in App.js , you import yourself as follows:

After importing, we continue to surround the div with their Draggable tag:

Lightweight style thanks to:

You will get the following results:

1.If you want to know your coordinates pull:

  • Simply use onDrag :

We will be as follows:

2. If you want to specify horizontal or vertical drag or not drag:

Here they also provided the following dental support:

  • axis = “x”: Component can only be dragged horizontally.
  • axis = “y”: Component can only be dragged vertically.
  • axis = “none”: Component cannot be dragged anymore. For example, axis = “x” :

The following results :

3. Or just want to work on a part to pull that part?

We do the following:

Result :

End :

  • Above are my tutorials on this package, if it helps you to code and do the task, please support me more by sharing and upvote this article. Thanks everyone.

P / S: I also played with a small demo, everyone can see the pictures and think for themselves how to code =))

If you want to find out more, I can put it below the document link here: https://www.npmjs.com/package/react-draggable

Share the news now

Source : Viblo