Source code

Revision control

Copy as Markdown

Other Tools

<!doctype html>
<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"/>
<link rel="author" title="Microsoft" href=""/>
<meta name="assert" content="Fire drag event when dragging a div element"/>
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
<script type="text/javascript">
function DragEvent(evt)
if ((TARGET == && (EVENT == evt.type))
EVENT = "drag";
window.onload = function()
TARGET = document.getElementById("target");
AddEventListenersForElement(EVENT, DragEvent, false, TARGET);
<pre>Description: Fire drag event when dragging a div element</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> Click and drag the red box
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).
<div id="target" style="border:2px red solid; width:200px; height:50px" draggable="true"></div>