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.
@@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.
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))
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.
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.
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!
This was so well done. High quality content and so helpful, thank you
thanks for watching!
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! 😂
I just found this channel. I am not disappointed. Thanks for sharing!
This video helped me get drag and drop working in my app in less than an hour
I came here from your web app. You web app is awesome dude... You just earned a subscriber...
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.
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?
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.
Coming through again, my man! Hope you are well and thank you as always for your solid vid vibe!
Awesome dude, you made it so easy for me to get started.
this explanation is outstanding
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 },
])
Very clear and straight video, thank you
great, finally some good vue tutorials
More to come!
Your video is so intuitive and clear, thank you.
thank you, got it on the first try following your tutorial
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)?
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.
Another high quality content. 👌
Excellent video. Super clear instruction and very helpful info. Thanks!
Great video! You make it look easy to follow! thanks
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))
good content and successes my bro
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!
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.
Awesome, thanks dude.😊
I love vue and I love this channel. Keep up the good work!
Good job ❤️❤️❤️. Thanks 👍
Thank you so much for watching 😊
It worked perfectly, thanks a lot!
A truly great video.
Can we drop the clone of the elements dragged in vue
Great tutorial. Thanks!
Why did you not use script setup?
Thanks so much for this.
Why remove "setup" from the script tag? Its makes vue 3 so much more readable...
Excellent Work
Will it work on vue2?
You're the best.
thanks!
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
super helpful
glad you think so!
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
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...
Good tutorial
would be great if these video would have been mobile friendly 🤗
greate video
thank you
nice
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