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:
1 2 | npx create-react-app my-app |
Then we continue the package:
1 2 | npm install react-draggable |
Step 2: You continue to import:
Once installed, in App.js , you import yourself as follows:
1 2 | import Draggable from 'react-draggable'; |
After importing, we continue to surround the div with their Draggable tag:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import React, {useState} from 'react'; import './App.css'; import Draggable from 'react-draggable'; function App() { return ( <> <Draggable> <div className="box"> <div>Oh yeah Oh yeahhhhh !!!!!</div> </div> </Draggable> </> ); } export default App; |
Lightweight style thanks to:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .box { position: absolute; cursor: move; color: black; max-width: 215px; border-radius: 5px; padding: 1em; margin: auto; user-select: none; background-color: aliceblue; } .drag-here { background-color: aqua; } .myInput { margin: 0 auto; width: 21%; -webkit-user-select: none; user-select: none; position: absolute; top: 40%; left: 52%; transform: translate(-50%, -50%); } input { border-radius: 5px 0 0 5px; color: black; font-size: 1.3em; background-color: bisque; padding: .5em; |
You will get the following results:
1.If you want to know your coordinates pull:
- Simply use onDrag :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React, {useState} from 'react'; import './App.css'; import Draggable from 'react-draggable'; function App() { const [position, setPosition] = useState({x: 0, y: 0}); const trackPos = (data) => { setPosition({x: data.x, y: data.y}); }; return ( <> <Draggable onDrag={(e, data) => trackPos(data)}> <div className="box"> <div>Here's my position...</div> <div> x: {position.x.toFixed(0)}, y: {position.y.toFixed(0)} </div> </div> </Draggable> </> ); } |
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” :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import React, {useState} from 'react'; import './App.css'; import Draggable from 'react-draggable'; function App() { // const [position, setPosition] = useState({x: 0, y: 0}); // const trackPos = (data) => { // setPosition({x: data.x, y: data.y}); // }; return ( <> <Draggable axis="x"> <div className="box"> <div>Oh yeah Oh yeahhhhh !!!!!</div> </div> </Draggable> </> ); } export default App; |
The following results :
3. Or just want to work on a part to pull that part?
We do the following:
1 2 3 4 5 6 7 | <Draggable handle="#handle"> <div className="box"> <span id="handle" className='drag-here'>Drag here</span> <div style={{padding: "1em"}}>Cannot drag here</div> </div> </Draggable> |
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