| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Drop file 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> |
|---|
| 16 | <textarea>foo bar</textarea> |
|---|
| 17 | </div> |
|---|
| 18 | <div> |
|---|
| 19 | <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> |
|---|
| 20 | <img src="./crayons.jpg" width="30" height="30" /> |
|---|
| 21 | <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> |
|---|
| 22 | </div> |
|---|
| 23 | <div id="droparea" contenteditable="true"> |
|---|
| 24 | <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> |
|---|
| 25 | <img src="./crayons.jpg" width="30" height="30" /> |
|---|
| 26 | <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> |
|---|
| 27 | </div> |
|---|
| 28 | |
|---|
| 29 | <script> |
|---|
| 30 | var droparea = document.getElementById('droparea'); |
|---|
| 31 | |
|---|
| 32 | droparea.ondrop = function ( evt ) { |
|---|
| 33 | var evt = evt || window.event; |
|---|
| 34 | |
|---|
| 35 | console.log( 'drop' ); |
|---|
| 36 | |
|---|
| 37 | debugger; |
|---|
| 38 | |
|---|
| 39 | evt.preventDefault(); |
|---|
| 40 | evt.stopPropagation(); |
|---|
| 41 | return false; |
|---|
| 42 | }; |
|---|
| 43 | |
|---|
| 44 | droparea.onpaste = function ( evt ) { |
|---|
| 45 | var evt = evt || window.event; |
|---|
| 46 | |
|---|
| 47 | console.log( 'paste' ); |
|---|
| 48 | |
|---|
| 49 | debugger; |
|---|
| 50 | |
|---|
| 51 | evt.preventDefault(); |
|---|
| 52 | evt.stopPropagation(); |
|---|
| 53 | return false; |
|---|
| 54 | }; |
|---|
| 55 | |
|---|
| 56 | // We need to cancel dragover event on IE. |
|---|
| 57 | // Otherwise files dropping won't work. |
|---|
| 58 | droparea.ondragover = function ( evt ) { |
|---|
| 59 | var evt = evt || window.event; |
|---|
| 60 | evt.preventDefault(); |
|---|
| 61 | evt.stopPropagation(); |
|---|
| 62 | return false; |
|---|
| 63 | }; |
|---|
| 64 | </script> |
|---|
| 65 | </body> |
|---|
| 66 | </html> |
|---|
