Random stuff, testing things, and so on.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

87 lines
2.1 KiB

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<thread>
<tr>
<th>Cell</th>
<th>Cell</th>
<th>Cell</th>
<th>Cell</th>
</tr>
</thead>
<tbody>
<tr draggable="true" class="dropzone">
<td draggable="false">1</td>
<td draggable="false">1</td>
<td draggable="false">1</td>
<td draggable="false">1</td>
</tr>
<tr draggable="true" class="dropzone">
<td draggable="false">2</td>
<td draggable="false">2</td>
<td draggable="false">2</td>
<td draggable="false">2</td>
</tr>
<tr draggable="true" class="dropzone">
<td draggable="false">3</td>
<td draggable="false">3</td>
<td draggable="false">3</td>
<td draggable="false">3</td>
</tr>
</tbody>
</table>
</body>
<script>
(function() {
let dragged = null;
document.addEventListener("dragstart", function(event) {
dragged = event.target;
event.target.style.opacity = .5;
});
document.addEventListener("dragenter", function(event) {
const parent = event.target.parentNode;
if (parent.className == "dropzone") {
event.target.parentNode.style.background = "#7f7f7f";
}
});
document.addEventListener("dragleave", function(event) {
const parent = event.target.parentNode;
if (parent.className == "dropzone") {
event.target.parentNode.style.background = "#ffffff";
}
});
document.addEventListener("dragover", function(event) {
// Necessário para que o "drop" funcione.
event.preventDefault();
});
document.addEventListener("drop", function(event) {
dragged.style.opacity = 1;
event.preventDefault();
const row = event.target.parentNode;
const table = row.parentNode;
if (row.className == "dropzone") {
row.style.background = "#ffffff";
const movement = dragged.compareDocumentPosition(row);
console.log('Movement: ', movement);
if (movement === Node.DOCUMENT_POSITION_PRECEDING) {
table.insertBefore(dragged, row);
} else {
table.insertBefore(dragged, row.nextSibling);
}
}
});
})();
</script>
</html>