Source code

Revision control

Other Tools

<!doctype html>
<title>HTML5 Drag and Drop: Fire dragleave event during the drag and drop processing</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href=""/>
<meta name="assert" content="Fire dragleave event during the drag and drop processing"/>
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
<script type="text/javascript">
function DragleaveEvent(evt)
if ((TARGET == && (EVENT == evt.type))
EVENT = "dragleave";
window.onload = function()
TARGET = document.getElementById("target");
AddEventListenersForElement(EVENT, DragleaveEvent, false, TARGET);
<pre>Description: Fire dragleave event during the drag and drop processing</pre>
<table id='testtable' border='1'>
<td>Test Result</td>
<td>Test Assertion</td>
<td id='test_result'>Manual</td>
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
<div id="manualsteps">
<li> Select the text inside the red box
<li> Drag it over the blue box and drop it on the green box
If there is a change in the current target element, and if the previous target element was not null or a part of a non-DOM document, then fire a DND event named dragleave at the previous target element.
<div style="border:2px red solid; width:100px">SampleText</div>
<br />
<div id="target" style="border:2px blue solid; width:200px; height:50px"></div>
<br />
<input type="text" style="border:2px green solid; width:200px; height:50px"></input>