OLD | NEW |
---|---|
(Empty) | |
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."); | |
dtapuska
2017/04/25 19:46:06
Um this line is commented out.. How does this work
Navid Zolghadr
2017/05/09 19:54:05
Done.
| |
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); | |
dtapuska
2017/04/25 19:46:06
Is this necessary?
Navid Zolghadr
2017/05/05 23:33:17
For some reason without this FF doesn't start the
| |
28 }); | |
29 innerdiv.addEventListener("dragenter", (e) => { | |
30 if (!got_dragenter) { | |
31 test(function() { | |
32 assert_equals(e.relatedTarget.id, "outerdiv", "drage nter event should have the correct relatedTarget."); | |
33 }, "dragenter event should have the correct relatedTarge t."); | |
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", "dragl eave event should have the correct relatedTarget."); | |
41 }, "dragleave event should have the correct relatedTarge t."); | |
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 eve nts</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 b ox</div> | |
61 <div id="outerdiv"> | |
62 <div id="innerdiv"></div> | |
63 </div> | |
64 </body> | |
65 </html> | |
OLD | NEW |