IntroductionDragging-and-dropping is a common user interaction that you can find in many graphical user interfaces. Show There are pre-existing JavaScript libraries for adding a drag-and-drop feature to your app. However, there may be situations where a library is not available or introduces an overhead or dependency that your project does not need. In these situations, knowledge of the APIs available to you in modern web browsers can offer alternative solutions. The HTML Drag and Drop API relies on the DOM’s event model to get information on what is being dragged or dropped and to update that element on drag or drop. With JavaScript event handlers, you can turn any element into a draggable item or an item that can be dropped into. In this tutorial, we will build a drag-and-drop example using the HTML Drag and Drop API with vanilla JavaScript to use the event handlers. PrerequisitesTo complete this tutorial, you will need:
Step 1 — Creating the Project and Initial MarkupOur project will consist of a container with two types of child elements:
First, open your terminal window and create a new project directory:
Next, navigate to that directory:
Then, create an
Next, add boilerplate code for a HTML webpage: index.html
And between the index.html
Save and close the file. Then, create a
Next, add styles for the elements in our style.css
This will add some formatting to the app. Now you can view Next, we will explicitly make the first index.html
Save and close the file. Finally, view The default value for the You now have an HTML file with a draggable element. We will move on to adding Step 2 — Handling Drag-and-Drop Events with JavaScriptCurrently, if we release the mouse while dragging the draggable element, nothing happens. To trigger an action on drag or drop on DOM elements, we’ll need to utilize the Drag and Drop API:
Note: There are eight event handlers in total: First, let’s
reference a new index.html
Next, create a new
The Note: The The
Our goal is to move our Let’s revisit our script.js
Note: Internet Explorer 9 through 11 reportedly has problems with using To update the dragged item’s CSS styling, we can access its styles using the DOM event again and by setting whatever styles we want for the
Let’s add to our function and change the script.js
Note: Any styles you change will need to be manually updated again on drop if you want drag-only styles. If you change anything when it starts dragging, the dragged element will keep that new styling unless you change it back. Now, we have our JavaScript function for when dragging starts. We can add index.html
View However, nothing will happen when you release your click. The next event handler fired in this sequence is The default drop
behavior for certain DOM elements like Let’s revisit the script.js
Now, we can add index.html
At this point,
we still have not written code handle the actual dropping. The final event handler fired in this sequence is Let’s revisit our We can reference the data we saved earlier with script.js
Select our script.js
Select our script.js
Append our script.js
Reset our script.js
Now, we can add index.html
Once that’s done, we have a completed drag-and-drop feature. View Our example handles the scenario of a single draggable item and a single drop target. You can have multiple draggable items, multiple drop targets, and customize it with all the other Drag and Drop API event handlers. Step 3 — Building an Advanced Example with Multiple Draggable ItemsHere’s one more example of how you could use this API: a to-do list with draggable tasks that you can move from a To create your own to-do list, add more draggable elements with unique index.html
View ConclusionIn this article, you created a to-do app to explore the drag-and-drop functionality that is available to modern web browsers. The Drag and Drop API provides multiple options for customizing your actions beyond dragging and dropping. For example, you can update the CSS styling of your dragged items. Also, instead of moving the item, you can choose to copy your draggable item so that it gets replicated on drop. Bear in mind that while many web browsers support this technology, you may not be able to rely on it if your audience consists of devices that do not support this functionality. To learn more about all you can drop with the Drag and Drop API, check out MDN’s docs on it. |