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!
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.
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))
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.
@@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.
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?
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.
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
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...
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!
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.
The tutorial is clear and builds the solution from first principles which is a great way for me modify it. Thanks Matt.
Glad to hear - that's always my goal with these videos!
Always appreciate tutorials utilising browser api standards over a hot library. People will still be able to use this video in 2 years.
Two years later and this video just saved me right now! 😂
This was so well done. High quality content and so helpful, thank you
thanks for watching!
This video helped me get drag and drop working in my app in less than an hour
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?
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.
I just found this channel. I am not disappointed. Thanks for sharing!
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 },
])
I came here from your web app. You web app is awesome dude... You just earned a subscriber...
Love this concise, direct and clear tutorial. Very professional
Very nice! Appreciate how you layout all the intricate details.
Thank you so much! I had a lot of fun making this video.
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))
Awesome dude, you made it so easy for me to get started.
this explanation is outstanding
Very clear and straight video, thank you
Coming through again, my man! Hope you are well and thank you as always for your solid vid vibe!
Your video is so intuitive and clear, thank you.
great, finally some good vue tutorials
More to come!
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)?
I love vue and I love this channel. Keep up the good work!
thank you, got it on the first try following your tutorial
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.
Excellent video. Super clear instruction and very helpful info. Thanks!
Is there a way to figure out how to drag & drop to change the order of the items in the list?
I'm also looking for this solution.. did you fixed this one Sam.
@@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.
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?
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.
Really really helpful. Thank you very much!
Great video! You make it look easy to follow! thanks
Another high quality content. 👌
A truly great video.
good content and successes my bro
Thanks so much for this.
Awesome, thanks dude.😊
Can we drop the clone of the elements dragged in vue
It worked perfectly, thanks a lot!
Why did you not use script setup?
Why remove "setup" from the script tag? Its makes vue 3 so much more readable...
Great tutorial. Thanks!
Good job ❤️❤️❤️. Thanks 👍
Thank you so much for watching 😊
Excellent Work
super helpful
glad you think so!
You're the best.
thanks!
thank you
Will it work on vue2?
How would I apply this tutorial to a hierarchical tree?
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
would be great if these video would have been mobile friendly 🤗
Good tutorial
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...
greate video
nice
for mobile device no works, can any help me?? :(
You'd need to use another API, for mobile devices is not working in this case
@@gastonmorales3619 i resolved! :D
Could You share the solution in this reply?
Yes, give me a few hours and I'll share it
@@pedroismael17 Any link please
super
Thaaaaaaaaaaaaankyoooooooou
best
Strange this code does not work on Firefox, Opera and Crhome (no errors)
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?
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...
thank you