π I have never used drag&drop functionality with vanilla JavaScript.
In the enterprise applications I work on every day, I usually rely on frameworks such as Angular, React, or Vue that provide easier ways to handle it and, in addition, solve the classic problems that I would have to handle by hand.
π‘ That's why I wanted to give it a try, developing a very basic project in HTML and JS.
Here, briefly, is what I figured out:
- In order to activate the dragging functionality on a element, it must be set the
draggable
attribute on it.
<div class="item" draggable="true">Drag me</div>
- If we need to add some actions (e.g. save element's data for future purpose) once the element is "grabbed", a listener to the
dragStart
event must be added to it.
<div
id="my-item"
class="item"
draggable="true"
ondragstart=handleDragStart(event)
>Drag me</div>
<script>
handleDragStart(e) {
console.log('You are dragging ', e.target.id)
}
</script>
- If we want to drop the selected element somewhere, we need to create one or more drop zones in the HTML.
In order to create them, we need to make the target element listen to
dragOver
anddrop
events.
<div
class="dropzone"
ondrop="handleDrop(event)"
ondragover="handleDragOver(event)"
>
Drop the dragging element here!
</p>
<script>
handleDrop(e) {
e.preventDefault(); // prevent default action (e.g. open as link for some elements)
// CODE HERE (e.g. append element to the drop zone)
}
handleDragOver(e) {
e.preventDefault(); // Required to allow Drop event
}
</script>
That's pretty much it!
Demo
As usual, I created a stackblitz project where you can use drag&drop to switch placements in a podium and choose which is the best π framework/library among Angularπ₯, Vueπ₯, and Reactπ₯! (Try to guess what my ranking is π)
And here is the link to the demo if you just want to play with it!
P.S. I did not use the dataTransfer property, but I will create a more "data-driven" demo to explain this function as well in the future.
Top comments (0)