043-manual.html (2122B)
1 <!DOCTYPE html> 2 <title>drag & drop - dragging nested draggable elements</title> 3 <style> 4 body > div { 5 height: 200px; 6 width: 200px; 7 background-color: navy; 8 position: absolute; 9 top: 8px; 10 left: 8px; 11 } 12 body > div div { 13 height: 100px; 14 width: 100px; 15 background-color: orange; 16 position: absolute; 17 left: 50px; 18 top: 50px; 19 } 20 body > div + div { 21 background-color: fuchsia; 22 height: 100px; 23 width: 100px; 24 left: 258px; 25 top: 58px; 26 } 27 p:first-of-type { 28 margin-top: 220px; 29 } 30 </style> 31 32 <script> 33 34 window.onload = function() { 35 var passed = true, orange = document.getElementsByTagName('div')[1], blue = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[2]; 36 37 orange.ondragstart = function(e) { 38 e.dataTransfer.effectAllowed = 'copy'; 39 e.dataTransfer.setData('text/plain', 'child targeted'); 40 }; 41 blue.ondragstart = function(e) { 42 if( e.target == this ) { 43 e.dataTransfer.effectAllowed = 'copy'; 44 e.dataTransfer.setData('text/plain', 'parent targeted'); 45 } else { 46 e.dataTransfer.setData('extra/data', 'parent bubble'); 47 } 48 }; 49 fuchsia.ondragenter = fuchsia.ondragover = function(e) { 50 e.preventDefault(); 51 e.dataTransfer.dropEffect = 'copy'; 52 }; 53 fuchsia.ondrop = function(e) { 54 e.preventDefault(); 55 //it's possible this could get called twice if the browser drags both items, so it uses the "passed" variable to make sure 56 //that if blue gets dropped first, it remains false when orange then gets dropped 57 passed = passed && ( e.dataTransfer.getData('text/plain') == 'child targeted' ) && ( e.dataTransfer.getData('extra/data') == 'parent bubble' ); 58 document.getElementsByTagName('p')[0].innerHTML = passed ? 'PASS' : 'FAIL'; 59 }; 60 61 }; 62 63 </script> 64 65 <div draggable='true'><div draggable='true'></div></div><div></div> 66 67 <p>Use your pointing device to drag the orange box to the pink box, then release it. While dragging, the drag placeholder should show that only the orange box is being dragged.</p> 68 <noscript><p>Enable JavaScript and reload</p></noscript>