Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<html>
<head>
<title>HTML5 Drag and Drop: Fire drag event when dragging a div element</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<meta name="assert" content="Fire drag event when dragging a div element"/>
<script type="text/javascript">
var EVENT, TARGET;
function DragEvent(evt)
{
if ((TARGET == evt.target) && (EVENT == evt.type))
{
document.getElementById("test_result").firstChild.data = "PASS";
}
else
{
document.getElementById("test_result").firstChild.data = "FAIL";
}
}
EVENT = "drag";
window.onload = function()
{
TARGET = document.getElementById("target");
TARGET.addEventListener(EVENT, DragEvent, false);
}
</script>
</head>
<body>
<pre>Description: Fire drag event when dragging a div element</pre>
<table id='testtable' border='1'>
<tr>
<td>Test Result</td>
<td>Test Assertion</td>
</tr>
<tr>
<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">
Steps:
<ol>
<li> Click and drag the red box
</ol>
</div>
</td>
</tr>
</table>
<p>
</p>
<p>
If the user agent is still performing the previous iteration of the sequence (if any) when the next iteration becomes due, abort these steps for this iteration (effectively "skipping missed frames" of the drag-and-drop operation).
Fire a DND event named drag event at the source node. If this event is canceled, the user agent must set the current drag operation to "none" (no drag operation).
</p>
<div id="target" style="border:2px red solid; width:200px; height:50px" draggable="true"></div>
</body>
</html>