Recently I decided to implement dragging and resizing of an object using vanilla JavaScript. I think many people use libraries to handle this type of functionality since it's easy and it works.
Well anyway, if you want to have a look at how it's implemented from scratch, I made a short 2-part YouTube video series. In part 1 we make a div shaped as a square movable and in part 2 we extend the implementation and make it re-sizable in 4 different directions!
You'll realize the implementation of the two is similar since we are interested in the x and y coords of the mouse at the start of holding mouse button down and as we move it.
Here's the video:
If you have any comments on the code, I'd love to hear them.
Note: Not super experienced uploading stuff to YouTube and speaking on video, so definitely some areas that could use some improvement 🐼
Top comments (0)