| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>getData, setData tests</title> |
|---|
| 5 | <meta charset="utf-8"> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | #droparea { |
|---|
| 8 | width: 500px; |
|---|
| 9 | height: 300px; |
|---|
| 10 | background: grey; |
|---|
| 11 | } |
|---|
| 12 | </style> |
|---|
| 13 | </head> |
|---|
| 14 | <body> |
|---|
| 15 | <div id="droparea" contenteditable="true"> |
|---|
| 16 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan faucibus nunc ut luctus. Ut dignissim libero enim, eget cursus libero faucibus consectetur. Praesent luctus, quam nec ultrices consectetur, ligula sapien porta purus, ac fringilla purus nunc eu odio.</p> |
|---|
| 17 | <img src="./crayons.jpg" width="30" height="30" /> |
|---|
| 18 | <p>Aliquam <b>mi est</b>, interdum a augue ut, bibendum laoreet sem. Sed scelerisque, eros nec hendrerit tempus, metus ante eleifend urna, quis auctor arcu magna condimentum dolor. Nullam varius cursus luctus. Aliquam quis risus ac turpis volutpat pellentesque. Fusce vestibulum arcu blandit ornare eleifend.</p> |
|---|
| 19 | </div> |
|---|
| 20 | |
|---|
| 21 | <script> |
|---|
| 22 | var droparea = document.getElementById('droparea'); |
|---|
| 23 | |
|---|
| 24 | droparea.ondragstart = function ( evt ) { |
|---|
| 25 | var evt = evt || window.event; |
|---|
| 26 | |
|---|
| 27 | evt.dataTransfer.clearData(); |
|---|
| 28 | evt.dataTransfer.setData( 'text', 'text data type' ); |
|---|
| 29 | evt.dataTransfer.setData( 'URL', 'http:/test.url/' ); |
|---|
| 30 | evt.dataTransfer.setData( 'text/plain', 'plain text data type' ); |
|---|
| 31 | evt.dataTransfer.setData( 'text/html', 'plain html data type' ); |
|---|
| 32 | evt.dataTransfer.setData( 'custom', 'custom data type' ); |
|---|
| 33 | }; |
|---|
| 34 | |
|---|
| 35 | droparea.ondrop = function ( evt ) { |
|---|
| 36 | var evt = evt || window.event; |
|---|
| 37 | |
|---|
| 38 | console.log( 'drop' ); |
|---|
| 39 | console.log( evt.dataTransfer.getData( 'text' ) ); |
|---|
| 40 | console.log( evt.dataTransfer.getData( 'URL' ) ); |
|---|
| 41 | console.log( evt.dataTransfer.getData( 'text/plain' ) ); |
|---|
| 42 | console.log( evt.dataTransfer.getData( 'text/html' ) ); |
|---|
| 43 | console.log( evt.dataTransfer.getData( 'custom' ) ); |
|---|
| 44 | }; |
|---|
| 45 | |
|---|
| 46 | droparea.oncopy = function ( evt ) { |
|---|
| 47 | var evt = evt || window.event, |
|---|
| 48 | clipboardData = evt.clipboardData || window.clipboardData; |
|---|
| 49 | |
|---|
| 50 | console.log( 'copy' ); |
|---|
| 51 | console.log( clipboardData ); |
|---|
| 52 | clipboardData.clearData(); |
|---|
| 53 | clipboardData.setData( 'text', 'text data type' ); |
|---|
| 54 | clipboardData.setData( 'text/plain', 'plain text data type' ); |
|---|
| 55 | clipboardData.setData( 'text/html', 'plain html data type' ); |
|---|
| 56 | clipboardData.setData( 'custom', 'custom data type' ); |
|---|
| 57 | |
|---|
| 58 | evt.preventDefault(); |
|---|
| 59 | evt.stopPropagation(); |
|---|
| 60 | return false; |
|---|
| 61 | }; |
|---|
| 62 | |
|---|
| 63 | |
|---|
| 64 | droparea.onpaste = function ( evt ) { |
|---|
| 65 | var evt = evt || window.event, |
|---|
| 66 | clipboardData = evt.clipboardData || window.clipboardData; |
|---|
| 67 | |
|---|
| 68 | console.log( 'paste' ); |
|---|
| 69 | console.log( clipboardData.getData( 'text' ) ); |
|---|
| 70 | console.log( clipboardData.getData( 'text/plain' ) ); |
|---|
| 71 | console.log( clipboardData.getData( 'text/html' ) ); |
|---|
| 72 | console.log( clipboardData.getData( 'custom' ) ); |
|---|
| 73 | }; |
|---|
| 74 | |
|---|
| 75 | droparea.ondragover = function ( evt ) { |
|---|
| 76 | var evt = evt || window.event; |
|---|
| 77 | evt.preventDefault(); |
|---|
| 78 | evt.stopPropagation(); |
|---|
| 79 | return false; |
|---|
| 80 | }; |
|---|
| 81 | |
|---|
| 82 | </script> |
|---|
| 83 | </body> |
|---|
| 84 | </html> |
|---|
