Extenza-Academy / WebDev-100_2021-Q1

24 Lessons, 12 Weeks, Get Started as a Web Developer
2 stars 0 forks source link

3.3.5. Review & Self-Study #104

Open mserykh opened 3 years ago

mserykh commented 3 years ago

Review & Self-Study

While dragging elements around the screen seems trivial, there are many ways to do this and many pitfalls, depending on the effect you seek. In fact, there is an entire drag and drop API that you can try. We didn't use it in this module because the effect we wanted was somewhat different, but try this API on your own project and see what you can achieve.

Find more information on pointer events on the W3C docs and on MDN web docs.

Always check browser capabilities using CanIUse.com.

mserykh commented 3 years ago

@dev-experience I have used Drag and Drop API here: https://codepen.io/trifle-on-a-stick/pen/QWKJNQM. I could not solve it myself so I used this tutorial: https://www.javascripttutorial.net/web-apis/javascript-drag-and-drop/.

What you can do now: drag and drop yellow square to another yellow square.

The hole idea: you can drop a figure only to a same shape hole.

@dev-experience I would like to finish this project with your help

mserykh commented 3 years ago

image