The ondragenter event attribute in HTML works when the content is draggable. An element is made by setting the draggable attribute value to true. The draggable attribute can take only true or false value.
Syntax:
<element ondragenter = "script">
Attribute Value: This attribute contains single value script which works when ondragenter event attribute called.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML ondragenter Event Attribute
</title>
<script>
function MyFunction() {
document.getElementById("geeks").style.backgroundColor
= "green";
}
</script>
</head>
<body id="geeks" style="text-align:center">
<h1 ondragenter="MyFunction()" draggable="true">
GeeksforGeeks
</h1>
<p>Drag heading content to change background color</p>
</body>
</html>
|
Output:
Before dragging the content:
After dragging the content:
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML ondragenter Event Attribute
</title>
<script>
function dragenter_time() {
document.getElementById("geeks").innerHTML
= "The date and time is: " + Date();
}
</script>
</head>
<body>
<center>
<p id="geeks" ondragenter="dragenter_time()"
draggable="true">Drag to know time
</p>
</center>
</body>
</html>
|
Output:
Before dragging the content:
After dragging the content:
Supported Browsers: The browser supported by ondragenter event attribute are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 9.0
- Firefox 9.0
- Safari 3.1
- Opera 12.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
18 Aug, 2022
Like Article
Save Article