Horje
HTML ondragend Event Attribute

The ondragenter event attribute in HTML is a global event attribute that fires when a draggable element or text selection enters a valid drop target. It is part of the HTML Drag and Drop API, which allows users to drag elements from one location and drop them into another on a web page. 

 

Example of HTML ondragenter Event Attribute

It will Execute a JavaScript when a draggable element enters a drop target.

index.html
Example: HTML
 <div ondragenter="myFunction(event)"></div> 

Output should be:

Example of HTML ondragenter Event Attribute

Definition and Usage of HTML ondragenter Event Attribute

The ondragenter attribute fires when a draggable element or text selection enters a valid drop target.

The ondragenter and ondragleave events can help the user to understand that a draggable element is about to enter or leave a drop target. This can be done by, for example, setting a background color when the draggable element enters the drop target, and removing the color when the element is moved out of the target.

Drag and drop is a very common feature in HTML5. It is when you "grab" an object and drag it to a different location. For more information, see our HTML Tutorial on HTML5 Drag and Drop.

Note: To make an element draggable, use the global HTML5 draggable attribute.

Tip: Links and images are draggable by default, and do not need the draggable attribute.

There are many event attributes that are used, and can occur, in the different stages of a drag and drop operation:

Browser Support of HTML ondragenter Event Attribute

The numbers in the table specify the first browser version that fully supports the event attribute.

Browser Support of HTML ondragenter Event Attribute

Syntax of HTML ondragenter Event Attribute

<element ondragenter="script">

Attribute Values of HTML ondragenter Event Attribute

Value Description
script The script to be run on ondragenter

Technical Details of HTML ondragenter Event Attribute

Supported HTML tags: ALL HTML elements

How to Execute a JavaScript when a draggable element enters a drop target

It will Drag the p element back and forth between the two rectangles.

index.html
Example: HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  margin-right: 100px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p>Drag the p element back and forth between the two rectangles:</p>

<div class="droptarget" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p style="clear:both;" id="demo"></p>

<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function dragEnter(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
    document.getElementById("demo").innerHTML = "Entered the dropzone";
  }
}

function dragLeave(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
    document.getElementById("demo").innerHTML = "Left the dropzone";
  }
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  let data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>

Output should be:

How to Execute a JavaScript when a draggable element enters a drop target




html event attributes

Related Articles
List of Drag Events Attribute Drag Events Attribute
HTML ondrag Event Attribute Drag Events Attribute
HTML ondragend Event Attribute Drag Events Attribute
HTML ondragend Event Attribute Drag Events Attribute
HTML ondragleave Event Attribute Drag Events Attribute
HTML ondragover Event Attribute Drag Events Attribute
HTML ondragstart Event Attribute Drag Events Attribute
HTML ondrop Event Attribute Drag Events Attribute
HTML onscroll Event Attribute Drag Events Attribute

Single Articles
Example of HTML ondragenter Event AttributeDrag Events Attribute
Definition and Usage of HTML ondragenter Event AttributeDrag Events Attribute
Browser Support of HTML ondragenter Event AttributeDrag Events Attribute
Syntax of HTML ondragenter Event AttributeDrag Events Attribute
Attribute Values of HTML ondragenter Event AttributeDrag Events Attribute
Technical Details of HTML ondragenter Event AttributeDrag Events Attribute
How to Execute a JavaScript when a draggable element enters a drop targetDrag Events Attribute

Type:
Develop
Category:
Web Tutorial
Sub Category:
Drag Events Attribute
Uploaded by:
Admin


Reffered: https://www.w3schools.com/tags/ev_ondragenter.asp