044-manual.html (1737B)
1 <!DOCTYPE html> 2 <title>drag & drop - dragging selections inside draggable elements</title> 3 <style> 4 body > div { 5 height: 200px; 6 width: 200px; 7 background-color: orange; 8 position: absolute; 9 top: 8px; 10 left: 8px; 11 } 12 body > div + div { 13 background-color: fuchsia; 14 left: 250px; 15 } 16 p:first-of-type { 17 margin-top: 220px; 18 } 19 </style> 20 21 <script> 22 23 window.onload = function() { 24 var orange = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[1]; 25 26 orange.ondragstart = function(e) { 27 e.dataTransfer.effectAllowed = 'copy'; 28 e.dataTransfer.setData('extra/data', 'parent bubble'); 29 }; 30 fuchsia.ondragenter = fuchsia.ondragover = function(e) { 31 e.preventDefault(); 32 e.dataTransfer.dropEffect = 'copy'; 33 }; 34 fuchsia.ondrop = function(e) { 35 e.preventDefault(); 36 var passed = ( e.dataTransfer.getData('text/plain') == 'text dummy' ) && ( e.dataTransfer.getData('extra/data') == 'parent bubble' ); 37 document.getElementsByTagName('p')[0].innerHTML = passed ? 'PASS' : 'FAIL'; 38 }; 39 var range = document.createRange(); 40 range.selectNodeContents(orange); 41 range.setStart(orange.firstChild,6); 42 range.setEnd(orange.firstChild,16); 43 window.getSelection().addRange(range); 44 45 }; 46 47 </script> 48 49 <div draggable='true'>Dummy text dummy text</div><div></div> 50 51 <p>Use your pointing device to <strong>drag the selected text</strong> to the pink box, then release it. While dragging, the drag placeholder should show that only the selected text is being dragged.</p> 52 <p>(If no text is selected, you will need to use your browser's functionality to select "text dummy" in the orange box.)</p> 53 <noscript><p>Enable JavaScript and reload</p></noscript>