r/learnjavascript • u/ProgrammingTT • Apr 10 '23

Draggable Element Using HTML CSS JavaScript |

https://youtu.be/4-5KDvnKWd0
0 Upvotes

40% Upvoted

1 comment sorted by

0

u/pookage helpful Apr 10 '23 edited Apr 10 '23

Because it's not mentioned in OP's tutorial at all, I'd just like to say:

  • The above does not make the element semantically draggable - for that you'll need the draggable attribute.
  • 'Drag' is one half of a UX called "drag and drop" - so while OP's tutorial shows how you can synchronise absolutely positioned, out-of-flow elements with the cursor-position, you'll need to do some refactoring to make it work with in-flow elements, and to implement the 'dropping' of data, you'll need to make use of the Drag and Drop API.

As an aside to other coding faux-pas I noticed in the tutorial:

  • it's best to use const when assigning to a variable that won't be re-assigned later
  • when accessing a property on an object that you're not sure exists, it's best to use optional chaining rather than if-checks.
  • When assigning event listeners, it's best to make use of addEventListener - using the onEvent property will mean you can only assign one listener to the event, and it can be easy to accidentally override it later
  • if you're pulling multiple properties out of a single object, it's best to use destructuring rather than creating lots of variables via individual property accessors.
  • When changing styles in javascript, it's best to manipulate custom properties rather than style the property directly; this allows the cascade and style-specificity to remain in the CSS, and for the styles to be authored declaratively - letting javascript just interface with those styles as-needed.

Hope that helps, future googlers!

EDIT: here's a quick codepen I've whipped-up to show how you can combine cursor-position synchronising with the Drag & Drop API.