| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <html> |
| <style> |
| html, body { |
| margin: 0; |
| font-family: -apple-system; |
| } |
| |
| #source, #destination { |
| width: 100%; |
| margin: 0; |
| } |
| |
| #destination { |
| border: 1px blue green; |
| height: 1024px; |
| } |
| |
| #source { |
| font-size: 150px; |
| white-space: nowrap; |
| height: 200px; |
| } |
| </style> |
| <body> |
| <div draggable="true" id="source"><strong style="color: purple">Rich text</strong></div> |
| <div id="destination" contenteditable></div> |
| <pre id="output"></pre> |
| </body> |
| <script> |
| |
| // The contents of this `result` dictionary will contain a map of {event type => {MIME type => data}}. |
| result = {}; |
| |
| function updateResultWithEvent(event) { |
| const eventData = {}; |
| for (const type of event.dataTransfer.types) |
| eventData[type] = event.dataTransfer.getData(type); |
| result[event.type] = eventData; |
| if (event.type === "drop") |
| output.textContent = JSON.stringify(result, null, " "); |
| event.preventDefault(); |
| } |
| |
| function setCustomData(event) { |
| event.dataTransfer.setData("text/plain", "ben bitdiddle"); |
| event.dataTransfer.setData("foo/🤔👌🙃", "🤔👌🙃"); |
| event.dataTransfer.setData("text/html", "<b>年年年</b>"); |
| event.dataTransfer.setData("bar/מקור השם עברית", `<i>מקור השם עברית</i>`); |
| event.dataTransfer.setData("text/uri-list", "https://www.apple.com"); |
| event.dataTransfer.setData("baz/年年年", "https://www.webkit.org"); |
| event.dataTransfer.setData("text/rtf", "AAAAAAAAAAA"); |
| } |
| |
| source.addEventListener("dragstart", setCustomData); |
| destination.addEventListener("dragover", updateResultWithEvent); |
| destination.addEventListener("drop", updateResultWithEvent); |
| |
| if (window.testRunner && window.eventSender && window.internals) { |
| internals.settings.setCustomPasteboardDataEnabled(true); |
| testRunner.dumpAsText(); |
| eventSender.mouseMoveTo(100, 100); |
| eventSender.mouseDown(); |
| eventSender.leapForward(500); |
| eventSender.mouseMoveTo(100, 400); |
| eventSender.mouseUp(); |
| } |
| </script> |
| </html> |
