Adding Drag and Drop to Your Vue 3 Project

adding drag-and-drop functionality is a great way to make your apps feel more natural and user-friendly of course there are tons of drag-and-drop libraries out there but honestly i think it's super valuable to understand how all of them work under the hood and who knows maybe your use case is better suited to writing your own custom code in this tutorial we'll be using the built-in html drag and drop api to set up a simple drag and drop system ready let's go for this tutorial we're going to be creating our view 3 project using v if you want to learn more about veed be sure to check out the link in the description for our in-depth guide to summarize first we have to create our app then we run npm install to get our dependencies and then finally start up our app we can head over to app.view and delete the default template and script we'll be running our own so it's just easier to start from scratch and for the script be sure to remove this setup attribute okay let's set up our array of data we're going to keep it simple for this tutorial first we want to import ref so we can create reactive data then we'll make our setup method and type const items equals ref and inside we'll create an array of objects for each object we need three properties first a unique id so we can identify each item second a title that will render in our template and then third the list it belongs to as you can see all of our elements are stored in this one array regardless of what list it belongs to we're going to separate the items by creating a get list method that returns the items for a given list so let's create const get list and set it equal to a function that takes the list as an argument inside all we want to do is filter our list using the arrays filter method and we only want to return items if their list matches our argument don't forget because this is the composition api we need our setup method to return get list so that we can access it in our template now that we have our list data set up let's work on rendering them to the screen inside our template let's create a div called drop zone and this will be the container for each list next we want to create a v4 loop and loop over everything inside list one using get list and then passing in the one we'll set the key to the item id and we'll give this element a class name of drag l so that we can style and access it later inside each drag out let's just print out the item title if we look at our app we'll see that the elements of the first list are rendering to the screen so let's copy and paste this code and change get list 1 to get list 2. awesome next let's add some simple styles to our app so inside the styles section let's change the width of our drop zone center it and then change the background color and padding the only essential style is setting our min height so that our drop zone will have some height even when there are no elements in its list this is super important because if our drop zones have a height of 0 when they're empty then we won't be able to hover over them and drop new elements in next let's modify our drag l class and add some colors margin and padding and then finally to make sure that everything is symmetrical let's remove the margin bottom from the final drag l element of each list personally i think it looks much better and now we're finally ready to add some drag and drop functionality the html drag and drop api is the browser's built-in way to enable drag-and-drop functionality in your app it contains several events and properties but we can approach it with a mindset that there are two main types of elements draggable elements or ones that can be dragged and droppable elements or elements that accept the dragged elements to make our items draggable all we have to do is set the draggable attribute to true now we can click and drag them around but that's it before we start adding more code let's take a high level look at how our drag and drop is going to work for the functionality we're looking for we're going to use two events from the drag and drop api drag start and drop both of these methods add a data transfer object to our events and this data transfer object allows us to set data when we start dragging an element and access that same exact data when we drop our element in a drop zone so when we start dragging an element we want to store a way to access the item that we're dragging then whenever we drop over a drop zone you want to get that item and change its list to wherever we dropped it inside our setup method let's start by creating our start drag method and it takes two parameters event and an item for now let's set up a console log statement where we print out the item being dragged then we have to adjust two settings for the drag and drop api to work how we want first we have to set event.datatransfer.drop effect to move and this controls the visual feedback that user gets during a drag-and-drop operation second we have to set event.datatransfer.effectaloud to move and this tells the drag and drop api that we want to move the original item instead of creating a copy with that out of the way the final line we need is event.datatransfer.setdata and this is a method inside we want to pass the name item id and then store the item's id to call this method we need to go to our drag l and listen for the drag start event by saying add drag start equals start drag and then we want to pass the event and the item okay let's take a look at our console when we click and start dragging an item we can see the proper element being logged now let's give a place for our items to be dropped back inside setup we'll create another method called on drop and it will also take two parameters one for the event and one for the list the first thing we want to do is access the item id that we stored in our data transfer object and that's as easy as saying const item id equals event.datatransfer.getdata and then item id then let's find the item associated with this id and we can use the arraysfind method so let's create a constant item equals items.value remember that we need value because items is a ref and then find the item where the id matches our item id once we have the item we can change its list to the list that we're passing in okay we're almost there let's just head back to our template and in each drop zone we can listen to the drop event and call on drop we'll pass it our event and then the list one thing that's not really intuitive is that we have to call prevent default on two of the drag and drop hooks drag enter and drag over this is by default these two methods don't allow elements to be used as droppable elements so for our drop event to work properly we have to prevent their default action we can do this using view's built-in prevent event modifier and that should be it if we run our app now we should see that everything works as expected we can drag and drop elements between our two different lists i'm gonna go ahead and wrap this video up here of course this is just a quick introduction into implementing drag and drop in view three there's so many directions you could take these ideas and i'd love to see what you come up with leave any questions you have in the comments down below and don't forget to like and subscribe for more view content peace

Channel: LearnVue

Views: 16,753

Keywords: vuejs, web development

Id: -kZLD40d-tI

Length: 7min 5sec (425 seconds)

Published: Sun Jan 31 2021