Is it possible to let a user drag and drop e.g. an element between two html tables with html/JavaScript?
Example:
This example code runs perfectly fine on a non-Domino-Leap webserver.
But in Domino Leap the curser automatically changes to a 'not-allowed' cursor and thus drag and drop doesn't work.
(Domino Leap version: 1.1.5 | Domino Server 14.0)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tree Table with Drag and Drop</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.draggable {
cursor: move;
}
</style>
</head>
<body>
<h2>Tree Table</h2>
<table id="treeTable">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr draggable="true" class="draggable">
<td>Parent 1</td>
<td>Value 1</td>
</tr>
<tr draggable="true" class="draggable">
<td>Parent 2</td>
<td>Value 2</td>
</tr>
</tbody>
</table>
<h2>Grid Table (Drop Target)</h2>
<table id="gridTable">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
const draggableRows = document.querySelectorAll('#treeTable .draggable');
const gridTableBody = document.querySelector('#gridTable tbody');
draggableRows.forEach(row => {
row.addEventListener('dragstart', function (e) {
e.dataTransfer.setData('text/plain', JSON.stringify({
name: this.cells[0].innerText,
value: this.cells[1].innerText,
}));
});
});
gridTableBody.parentElement.addEventListener('dragover', function (e) {
e.preventDefault();
});
gridTableBody.parentElement.addEventListener('drop', function (e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
if (data) {
const rowData = JSON.parse(data);
const newRow = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.innerText = rowData.name;
const valueCell = document.createElement('td');
valueCell.innerText = rowData.value;
newRow.appendChild(nameCell);
newRow.appendChild(valueCell);
gridTableBody.appendChild(newRow);
}
});
</script>
</body>
</html>