Advent-Of-Vue / drag-and-drop-presents

Created with StackBlitz ⚡️

Advent Of Vue 2022

If you didn't get here from an email, read this section! Skip it otherwise.

Advent Of Vue is a series of 24 Vue coding challenges that are sent out every day from December 1 to December 24 via a dedicated newsletter. If you'd like to receive more of these puzzles in the future, go ahead and sign up!

Problem description

In this challenge, we need a way to put the presents under the tree! To do this we're going to use the Drag + Drop API.

There are a few parts:

1. Allowing the presents to be dragged
2. Allowing the tree to accept dragged items
3. Moving the dragged present from the presents array to the underTheTree array.

To complete this, you'll have to make some changes to App.vue - adding the proper event listeners and implementing the startDrag and onDrop methods!

Good luck.

If you'd like some more explanations/hints, here's a tutorial (with a video!) that I've made that covers some of these concepts:

https://learnvue.co/tutorials/vue-drag-and-drop

Example of a solution in action

To see a working demo check out: https://stackblitz.com/edit/drag-and-drop-presents

Author

Hey hey! My name's Matt and I run a little Vue website/youtube channel called LearnVue

Check out my sites for some more quick lessons + subscribe if you'd like...no pressure though

• youtube.com/learnvue
• learnvue.co
• twitter.com/mattmaribojoc

Credits

Based on a Stackblitz project by tony19