Adding Drag and Drop to Your Vue 3 Project

[@lehlohonolomotsoeneng6672]

After two libraries and more than 2 hours and not getting it right, I watched your tutorial and got it right and my application works like a charm. Thank you!

[@ashemukisa4727]

The tutorial is clear and builds the solution from first principles which is a great way for me modify it. Thanks Matt.

[@LearnVue]

Glad to hear - that's always my goal with these videos!

[@astrosoup]

This was so well done. High quality content and so helpful, thank you

[@LearnVue]

thanks for watching!

[@tomparke2407]

Always appreciate tutorials utilising browser api standards over a hot library. People will still be able to use this video in 2 years.

[@casmironyeka1104]

Two years later and this video just saved me right now! 😂

[@PrashantNirgun]

This tutorials is very good it uses Vanila Js instead of additional libraries just few bytes of code and that's all. Good work keep it up.

[@perfect.stealth]

I just found this channel. I am not disappointed. Thanks for sharing!

[@_rtdp_]

I came here from your web app. You web app is awesome dude... You just earned a subscriber...

[@DaneVideo]

This video helped me get drag and drop working in my app in less than an hour

[@00AnnaEszter]

Thank you for the this great beginners guide! I would love to see a second part where the inner values of the draggable elements are changing: like if C is a basket and A and B are elements that we can add to the basket so the value of C is growing and the number (on) of A and B are reducing.

[@mikehillbilly4079]

Love this concise, direct and clear tutorial. Very professional

[@rashadrivera100]

Very nice! Appreciate how you layout all the intricate details.

[@LearnVue]

Thank you so much! I had a lot of fun making this video.

[@carlosenriquepineiro375]

THANKS! I'm building something like a kanban board and I think this is exactly what I need. I was analysing for discontinued libraries. I just have to check what has changes in this years.

[@MattMcT]

Coming through again, my man! Hope you are well and thank you as always for your solid vid vibe!

[@araputrevor5103]

Awesome dude, you made it so easy for me to get started.

[@christiancolewan]

Thanks I leaned about the html drag and drop API

[@titusayyasamy3035]

this explanation is outstanding

[@PopescuMarian]

great, finally some good vue tutorials

[@LearnVue]

More to come!

[@chamberlainpi]

Why nuke the “setup” attribute from the get go? Are there any reasons this couldn’t have been accomplished with the new setup syntax sugar?

[@herisetrarazafiarison4563]

Very clear and straight video, thank you

[@HN01-u1b]

thank you, got it on the first try following your tutorial

[@陈大锤-q1s]

Your video is so intuitive and clear, thank you.

[@MrBalobba]

I love vue and I love this channel. Keep up the good work!

[@codybontecou]

For anyone running into the error `Uncaught TypeError: Cannot set properties of undefined (setting 'list')`, I fixed this by setting my item ID's to strings. const items = ref([ { id: '0', title: 'Item A', list: 1 }, { id: '1', title: 'Item B', list: 1 }, { id: '2', title: 'Item C', list: 2 }, ])

[@dibbyo456]

Another high quality content. 👌

[@AlphaWatt]

Excellent video. Super clear instruction and very helpful info. Thanks!

[@ricardovergara9852]

Great video! You make it look easy to follow! thanks

[@vitordossantosbrandao8325]

Really really helpful. Thank you very much!

[@yoanestradablanco1608]

good content and successes my bro

[@sammieboy793]

Is there a way to figure out how to drag & drop to change the order of the items in the list?

[@AchariPhp]

I'm also looking for this solution.. did you fixed this one Sam.

[@thefeymesaleng]

@@AchariPhp 2 months late, but the usual way of doing it is having another elements inside the item itself and positioned it at the top and bottom that take a drag/drop event/function. So if a dragged item dropped on top positioned element of an item, it will run a function that inserting the dragged item to one index behind the item, and the same for the bottom element of an item, but with the add one index.

[@lawrencesmith9059]

A truly great video.

[@vinothrenga1]

Awesome, thanks dude.😊

[@thomasderidder608]

It worked perfectly, thanks a lot!

[@casmironyeka1104]

Thanks so much for this.

[@paul2DD]

dataTransfer stores Strings, for those who get into error "Uncaught TypeError: item is undefined", you must convert itemId to string -> const item = items.value.find((item) => item.id === parseInt(itemId))

[@SusanthCom]

Good job ❤️❤️❤️. Thanks 👍

[@LearnVue]

Thank you so much for watching 😊

[@AgnesPalit_adirgapalit]

Hi Do you have a way so the object that we drag and drop only stick into axis x or y (move horisontaly/vertically only)?

[@stevensadler1685]

For me, dragging and dropping an item is moving it to the new group, but there is no semi-transparent version of the item following the mouse pointer. Instead my mouse pointer turns into a circle with a line through it - the "no" symbol. Any idea what I missed?

[@LearnVue]

hmm i haven't seen that before. just from my experience, it could be one of the settings in the drag and drop api - since it is pretty specific on the requirements needed. so just make sure that all of those match. or it could maybe it a browser-specific issue.

[@markg5986]

Great tutorial. Thanks!

[@cozilic]

If you are doing this via a Laravel blade view, don't forget to include the props export default { props:['itemID'], setup() {.... thats what i had to do anyways.

[@itxhaseeb5794]

Excellent Work

[@dfeverx-en]

super helpful

[@LearnVue]

glad you think so!

[@jntaca]

You're the best.

[@LearnVue]

thanks!

[@antifa_communist]

Why did you not use script setup?

[@dgenerationx5220]

Can we drop the clone of the elements dragged in vue

[@max_nostradamus]

Why remove "setup" from the script tag? Its makes vue 3 so much more readable...

[@MohdSolihin]

thank you

[@user-jt5vm3mi1w]

Good tutorial

[@siemaneczko9850]

Will it work on vue2?

[@Imaginativeone_DF]

How would I apply this tutorial to a hierarchical tree?

[@LearnVue]

it should be a pretty similar concept, but with nested drop zones. the draggable should ondrop event would still trigger with the id, which you can use to move data around. i haven’t tested this on my computer, but the two things i’d look out for are: 1. making sure events don’t propagate up the component chain in the case of nested drop zones 2. the data structure would be a more complex than the tutorial

[@kanundash]

greate video

[@JORGEMARTINEZ-ho4wp]

nice

[@oleksiizelenko9357]

super

[@sebastianjung3168]

would be great if these video would have been mobile friendly 🤗

[@pedroismael17]

for mobile device no works, can any help me?? :(

[@gastonmorales3619]

You'd need to use another API, for mobile devices is not working in this case

[@pedroismael17]

@@gastonmorales3619 i resolved! :D

[@gastonmorales3619]

Could You share the solution in this reply?

[@pedroismael17]

Yes, give me a few hours and I'll share it

[@SusanthCom]

@@pedroismael17 Any link please

[@ShadowVipers]

Oh man, I knew about those events, but never realized what they were for.... I ended up building the drag & drop logic from scratch using drag classes and setting it's position based on the cursor pos.... The facepalm is real...

[@wahomemutahi1008]

Thaaaaaaaaaaaaankyoooooooou

[@bibhasash7371]

best

[@kafir5801]

Strange this code does not work on Firefox, Opera and Crhome (no errors)

[@БехрузАбдувалиев-н5и]

Uncaught TypeError: Cannot read property 'dataTransfer' of undefined at Proxy.onDrop (App.vue:34) setup() { const items = ref([ {id: 0, title: 'Item A', list: 1}, {id: 1, title: 'Item B', list: 1}, {id: 2, title: 'Item C', list: 2}, {id: 3, title: 'Item D', list: 2}, ]) const getList = (list) => { return items.value.filter((item) => item.list == list) } const startDrag=(event,item)=>{ console.log(item) event.dataTransfer.dropEffect='move' event.dataTransfer.effectAllowed='move' event.dataTransfer.setData('itemId',item.id) } const onDrop=(event,list)=>{ const itemId=event.dataTransfer.getData('itemId') const item=items.value.find((item)=> item.id ===itemId) item.list=list } return { getList,startDrag,onDrop } } where is mistake?

[@fermevc]

When you call startDrag function from the template, you need to put "$event", but I'm just guessing because you didn't share all the code...

[@webdev1943]

thank you