Data Transfer
This feature is not (yet) supported on your device
The Data Transfer API enables data to be transferred between web apps and other applications through drag-and-drop
or copy-and-paste.
This works by setting multiple DataTransferItems on the DragEvent that contain data as
HTML that can be dragged onto text-based apps and data as a URL that can be dragged onto a browser tab.
When data is copied and pasted from other apps, the data will be exposed on the ClipBoardEvent as one
or more DataTransferItems that contain data. In that case, you will need to inspect the items to see
which data is available.
Demo
Click to focus a cell in the table below and then drag the table to another application like Notes on macOS, Excel
on Windows or any other text editor. Drag the table to a new browser tab to open this demo page.
You can also copy or select and drag cells from tables in Excel on Windows or Numbers on macOS and paste or drop
them into the table below.
| Column 1 |
Column 2 |
Column 3 |
Column 4 |
Column 5 |
| Cell 1 |
Cell 2 |
Cell 3 |
Cell 4 |
Cell 5 |
| Cell 1 |
Cell 2 |
Cell 3 |
Cell 4 |
Cell 5 |
| Cell 1 |
Cell 2 |
Cell 3 |
Cell 4 |
Cell 5 |
| Cell 1 |
Cell 2 |
Cell 3 |
Cell 4 |
Cell 5 |
const table = document.querySelector('#data-transfer-table');
// set dataTransfer items
table.addEventListener('dragstart', (e) => {
// set table HTML as dataTransfer item
e.dataTransfer.items.add(table.outerHTML, 'text/html');
// set demo URL as dataTransfer item
e.dataTransfer.items.add('https://whatpwacando.today/data-transfer', 'text/uri-list');
})
const tds = table.querySelectorAll('td');
tds.forEach(td => {
// set "dragover" class on td to indicate that
// data is dragged over it
// this event handler is required for the
// "drop" event to fire
td.addEventListener('dragover', (e) => {
e.preventDefault();
td.classList.add('dragover');
});
// remove "dragover" class on td when data is
// no longer dragged over it
td.addEventListener('dragleave', () => {
td.classList.remove('dragover');
});
// data is dropped on td
td.addEventListener('drop', async (e) => {
e.preventDefault();
td.classList.remove('dragover');
const { dataTransfer } = e;
// get all dataTransfer items from "drop" event
for (const item of dataTransfer.items) {
// get HTML string and parse it to paste it into the
// table, starting at the cell it was dropped on
if (item.type === 'text/html' && item.kind === 'string') {
item.getAsString((htmlString) => {
// example function
pasteTableData(td, htmlString);
});
break;
}
}
});
// data is pasted into td
td.addEventListener('paste', async (e) => {
e.preventDefault();
const { clipboardData } = e;
// get all dataTransfer items from "paste" event
for (const item of clipboardData.items) {
// get HTML string and parse it to paste it into the
// table, starting at the cell it was pasted into
if (item.type === 'text/html' && item.kind === 'string') {
item.getAsString((htmlString) => {
// example function
pasteTableData(td, htmlString);
});
break;
}
}
});
});