relatedTarget-attribute-manual.html (2662B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>relatedTarget attribute for dragenter and dragleave events</title> 5 <meta name="viewport" content="width=device-width"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #outerdiv { 10 padding: 50px; 11 background: blue; 12 } 13 #innerdiv { 14 width:200px; 15 height:100px; 16 background: green; 17 } 18 </style> 19 <script> 20 var drag_test = async_test("dragenter and dragleave are correctly fired."); 21 var got_dragenter = false; 22 var got_dragleave = false; 23 function run() { 24 var draggable = document.getElementById("draggable"); 25 var innerdiv = document.getElementById("innerdiv"); 26 draggable.addEventListener("dragstart", (e) => { 27 e.dataTransfer.setData("text", draggable.innerHTML); 28 }); 29 innerdiv.addEventListener("dragenter", (e) => { 30 if (!got_dragenter) { 31 test(function() { 32 assert_equals(e.relatedTarget.id, "outerdiv", "dragenter event should have the correct relatedTarget."); 33 }, "dragenter event should have the correct relatedTarget."); 34 got_dragenter = true; 35 } 36 }); 37 innerdiv.addEventListener("dragleave", (e) => { 38 if (!got_dragleave) { 39 test(function() { 40 assert_equals(e.relatedTarget.id, "outerdiv", "dragleave event should have the correct relatedTarget."); 41 }, "dragleave event should have the correct relatedTarget."); 42 got_dragleave = true; 43 if (got_dragenter) 44 drag_test.done(); 45 } 46 }); 47 } 48 </script> 49 </head> 50 <body onload="run()"> 51 <h1>Drag & Drop: relatedTarget attribute for dragenter and dragleave events</h1> 52 <h2 id="pointerTypeDescription"></h2> 53 <h4>Test Description: 54 <ol> 55 <li>Drag the text into the green box.</li> 56 <li>Without releasing the drag, drag the text out of the green box.</li> 57 </ol> 58 </h4> 59 <br> 60 <div id="draggable" draggable="true">Drag this text</br>over the green box</div> 61 <div id="outerdiv"> 62 <div id="innerdiv"></div> 63 </div> 64 </body> 65 </html>