Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<html>
<head>
<title>relatedTarget attribute for dragenter and dragleave events</title>
<meta name="viewport" content="width=device-width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#outerdiv {
padding: 50px;
background: blue;
}
#innerdiv {
width:200px;
height:100px;
background: green;
}
</style>
<script>
var drag_test = async_test("dragenter and dragleave are correctly fired.");
var got_dragenter = false;
var got_dragleave = false;
function run() {
var draggable = document.getElementById("draggable");
var innerdiv = document.getElementById("innerdiv");
draggable.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text", draggable.innerHTML);
});
innerdiv.addEventListener("dragenter", (e) => {
if (!got_dragenter) {
test(function() {
assert_equals(e.relatedTarget.id, "outerdiv", "dragenter event should have the correct relatedTarget.");
}, "dragenter event should have the correct relatedTarget.");
got_dragenter = true;
}
});
innerdiv.addEventListener("dragleave", (e) => {
if (!got_dragleave) {
test(function() {
assert_equals(e.relatedTarget.id, "outerdiv", "dragleave event should have the correct relatedTarget.");
}, "dragleave event should have the correct relatedTarget.");
got_dragleave = true;
if (got_dragenter)
drag_test.done();
}
});
}
</script>
</head>
<body onload="run()">
<h1>Drag & Drop: relatedTarget attribute for dragenter and dragleave events</h1>
<h2 id="pointerTypeDescription"></h2>
<h4>Test Description:
<ol>
<li>Drag the text into the green box.</li>
<li>Without releasing the drag, drag the text out of the green box.</li>
</ol>
</h4>
<br>
<div id="draggable" draggable="true">Drag this text</br>over the green box</div>
<div id="outerdiv">
<div id="innerdiv"></div>
</div>
</body>
</html>