| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <style> |
| body { |
| font-family: system-ui; |
| -webkit-user-modify: read-write; |
| margin: 0; |
| } |
| |
| div { |
| width: 300px; |
| height: 100px; |
| } |
| |
| div.drag { |
| -webkit-user-select: all; |
| border: 1px solid green; |
| font-size: 50px; |
| line-height: 100px; |
| text-align: center; |
| } |
| |
| div.drop { |
| border: 1px solid tomato; |
| } |
| </style> |
| <script> |
| addEventListener("load", () => { |
| document.querySelector(".drop").addEventListener("drop", event => { |
| document.body.style.webkitUserModify = "read-write-plaintext-only"; |
| document.querySelector("br").remove(); |
| }); |
| getSelection().selectAllChildren(document.querySelector(".drag")); |
| }); |
| </script> |
| </head> |
| <body> |
| <div class="drag" draggable="true">Drag me</div> |
| <div class="drop"><br></div> |
| <p>To run the test manually, drag and drop the selected text into the red box.</p> |
| </body> |
| </html> |
