How to Manage the HTMLElement Dragstart Event?
The “dragstart” event gets used in the creation of online game scenarios where specific functionality gets performed when its UI elements get dragged. Like in fighting games at the start of the movement, the specific audio or effects gets generated. These effects are invoked by the “dragstart” event. This property is also used in the creation of Drag and Drop sort of applications, you can also visit our dedicated article on the “drag” and “drop” implementation.
This blog is going to explain the procedure to manage the HTMLElement dragstart Event in JavaScript.
How to Manage the HTMLElement dragstart Event?
The HTMLElement “dragstart” event invokes a callback function whenever the selected element gets dragged by the end user. This event can be assigned with the selected HTML element inside the HTML code and using the vanilla JavaScript code.
Syntax
The syntax of the HTMLElement “dragstart” event in JavaScript format is stated below:
In the HTML format:
In the above-stated syntaxes, the “eleObj” is the variable that has the reference to the selected HTML element. The “calBackFunc()” is the function going to be invoked by the “dragstart” method. The “selElement” is the selected HTML element. The “ondragstart” is the secondary name of the “dragstart” event used when you want to attach the event via HTML code.
Let’s have a couple of examples to enhance the understanding level.
Example 1: Using “dragstart” Event to Apply Styling
In this code, the “dragstart” event is going to be used to modify the styling of the HTML Element when it starts to get dragged:
<html>
<head>
<style type="text/css">
#useCase {
text-align: center;
background: blueviolet;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<h1 style="color: seagreen;"> Linuxhint </h1>
<div>
<h3 draggable="true" id="useCase" > This styling on Selected h3 Element is applied at the start of Dragging</h3>
</div>
<script>
const selEle = document.getElementById("useCase");
selEle.addEventListener("dragstart", function() {
selEle.style.opacity = "0.5";
});
</script>
</body>
</html>
The description of the above-stated code is described in the below-listed format:
- First, in the CSS part select the “useCase” id and apply the CSS “text-align”, “background”, “color”, and “padding” properties. To apply basic styling over the selected element having an id of “useCase”.
- Now, inside the “<body>” tag, create a selected “h3” element, set its “draggable” attribute to “true” and assign it a unique id of “useCase”.
- After that, enter the “<script>” tag and store the reference of the selected element in a “selEle” named variable.
- In the end, using the “addEventListener()” method attach the “dragstart” event to the “selEle” variable and set the visibility to “0.5” for this variable inside the event function.
After the compilation of the above-stated code, our HTML page renders like this:
The output shows the visibility for selected element changes when it is dragged.
Example 2: Using ondragstart Event Along with ondrag Event
In this example, an HTML variation of the “dragstart” event which is “ondragstart” is going to be used to display a message over the console at the start of the dragging process. Let’s proceed:
The above is described below in the list format:
- Initially, the draggable “h3” element is created inside the parent “div” element.
- Next, the “ondragstart” event listener is assigned to the “h3” element which invokes the “StartOfDrag()” function. This is a callback function, so it executes every time the “h3” elements get dragged.
- Then, the “StartOfDrag()” function is defined which displays a dummy message over the console window.
Preview of the output over the console window after the execution of the above code:
The output shows that a single message gets displayed over the console each time the element starts to drag. You’ve successfully learned about managing the HTMLElement dragstart event.
Conclusion
The HTML element dragstart event executes a callback function over the selected element each time it gets dragged. The function triggers at the start only a single time and triggers again when it gets dragged again after releasing it. It can be attached to the element via HTML format with the help of its variation named “ondragstart” functionality. This blog has explained the process by which the HTML element dragstart event can be managed.
Source: linuxhint.com