mirror of
https://github.com/microsoft/playwright.git
synced 2024-12-15 22:22:53 +03:00
a6c3735b9d
The test file comes from mdn: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData References #1094
52 lines
1.5 KiB
HTML
52 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang=en>
|
|
<title>Examples of DataTransfer's setData(), getData() and clearData()</title>
|
|
<meta content="width=device-width">
|
|
<style>
|
|
div:not(.mouse-helper) {
|
|
margin: 0em;
|
|
padding: 2em;
|
|
}
|
|
#source {
|
|
color: blue;
|
|
border: 1px solid black;
|
|
}
|
|
#target {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<script>
|
|
function dragstart_handler(ev) {
|
|
console.log("dragStart");
|
|
// Change the source element's background color to signify drag has started
|
|
ev.currentTarget.style.border = "dashed";
|
|
// Set the drag's format and data. Use the event target's id for the data
|
|
ev.dataTransfer.setData("text/plain", ev.target.id);
|
|
}
|
|
|
|
function dragover_handler(ev) {
|
|
console.log("dragOver");
|
|
ev.preventDefault();
|
|
}
|
|
|
|
function drop_handler(ev) {
|
|
console.log("Drop");
|
|
ev.preventDefault();
|
|
// Get the data, which is the id of the drop target
|
|
var data = ev.dataTransfer.getData("text");
|
|
ev.target.appendChild(document.getElementById(data));
|
|
// Clear the drag data cache (for all formats/types)
|
|
ev.dataTransfer.clearData();
|
|
}
|
|
</script>
|
|
<body>
|
|
<script src="input/mouse-helper.js"></script>
|
|
<h1>Examples of <code>DataTransfer</code>: <code>setData()</code>, <code>getData()</code>, <code>clearData()</code></h1>
|
|
<div>
|
|
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
|
|
Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
|
|
</div>
|
|
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
|
|
</body>
|
|
</html>
|