Draggable and Droppable element with HTML and JavaScript
Create a new HTML element and inside the HTML file’s body tag, create a new div element with the following lines of code:
This will create the following webpage:
To style this element a little, write the following code outside of the <body> tag:
.dragElement {
width: 100px;
height: 70;
background-color:lightblue;
display: inline-block;
align-items: center;
vertical-align: bottom;
}
</style>
By changing this style you get the following output on the webpage:
For the script code, create a new script tag <script>, the javascript we will be placed inside of this script tag. For the javascript part, we are going to first create a new var that will later use the reference of the element to change its position on the webpage:
Next, we are going to create a function named move() that we will use to move the element. The first thing we are going to do inside this move function is to get the reference of our element inside a variable with the following line of code:
Not that we have our reference, we are going to set the position of this element to absolute. As we are moving the element with our choice we want to place it exactly where we want, not relative to some other element:
When we click on this element, we want to pass the reference of our element to the “dragValue” variable so that we can manipulate its position:
dragValue = element;
};
Now, that we have the reference of our element stored in the dragValue variable, we are now going to place it at the mouse’s location by using the following lines of code:
var x = e.pageX;
var y = e.pageY;
dragValue.style.left = x + "px";
dragValue.style.top = y + "px";
};
When we release the mouse button, we want to remove the reference of our element from the “dragValue” variable:
dragValue = null;
};
The last step is to invoke this move() function with the following line of code:
The complete script code will be:
move();
var dragValue;
functionmove() {
var element = document.getElementById("dragElement");
element.style.position = "absolute";
element.onmousedown = function () {
dragValue = element;
};
element.onmouseup = function () {
dragValue = null;
};
document.onmousemove = function (e) {
var x = e.pageX;
var y = e.pageY;
dragValue.style.left = x + "px";
dragValue.style.top = y + "px";
};
}
</script>
Save the file and execute the HTML, and you will get the following result on your browser:
And there you have it; you have made a drag and drop element in vanilla javascript
Conclusion
One of the simplest effects that you can create using the vanilla javascript along with HTML is the draggable and droppable element on your webpage. Among the midst of millions of websites, you want your webpage to stand out. For that, the webpage needs to be super attractive and interactive. There are multiple ways of doing one particular effect or animation thanks to the ever-increasing amounts of javascript libraries. But today we focused on creating something interactive using vanilla javascript.
