ฝัง
- เผยแพร่เมื่อ 28 ส.ค. 2024
- Adding drag and drop functionality is a great way to make your apps feel more natural and user friendly. In this tutorial, learn how to include the HTML Drag and Drop Project into your Vue 3 Vite App.
LINKS
Companion Article w/ Code - learnvue.co/20...
Vite Tutorial - www.youtube.co....
HTML Drag and Drop API - developer.mozi...
FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vu...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
![จบจนได้ ! | Black Myth: Wukong #007 [ตอนจบ?]](http://i.ytimg.com/vi/DSqvWndF0sw/mqdefault.jpg)
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!
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!
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.
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 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?
I just found this channel. I am not disappointed. Thanks for sharing!
Awesome dude, you made it so easy for me to get started.
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.
this explanation is outstanding
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.
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!
Coming through again, my man! Hope you are well and thank you as always for your solid vid vibe!
Thanks so much for this.
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))
A truly great video.
Your video is so intuitive and clear, thank you.
good content and successes my bro
thank you, got it on the first try following your tutorial
I love vue and I love this channel. Keep up the good work!
Awesome, thanks dude.😊
thank you
Another high quality content. 👌
Really really helpful. Thank you very much!
Excellent video. Super clear instruction and very helpful info. Thanks!
Great video! You make it look easy to follow! 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.
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)?
It worked perfectly, thanks a lot!
Good job ❤️❤️❤️. Thanks 👍
Thank you so much for watching 😊
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.
Great tutorial. Thanks!
super helpful
glad you think so!
Excellent Work
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.
Why did you not use script setup?
You're the best.
thanks!
nice
Why remove "setup" from the script tag? Its makes vue 3 so much more readable...
Can we drop the clone of the elements dragged in vue
greate video
Good tutorial
super
would be great if these video would have been mobile friendly 🤗
Will it work on vue2?
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...
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
Thaaaaaaaaaaaaankyoooooooou
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
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