There're 2 element div which are two mode of a table (side-table and center-table). When user drag and drop center-table on left area then it would turn into side-table and vice-versa.
Here I use js to get id of draged element and id of droped element then set their opacity to 0 and 1. But browser can't get id of elements. What's the problems or is there any another way to do this? [side-table][https://drive.google.com/file/d/1GM5eA-AevwqKpYKCGe7vld3OMtRJnvXE/view?usp=sharing]
[demo video][https://drive.google.com/file/d/1O8FbfRNudlgdsI_l3cGKqeSmSch03FTN/view?usp=sharing]
<div class="control-bar" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="sidebar" draggable="true" id="sidebar" ondragstart="drag(event)"></div>
</div>
<div class="centre" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="wrapper" id="wrapper" draggable="true" ondragstart="drag(event)"></div>
</div>
With js:
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("text", e.target.id);
}
function drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text");
document.getElementById(data).style.opacity = "0";
console.log(e.target.id);
document.getElementById(e.target.firstChild).opacity = "1";
}
you can use my solution
<body>
<div class="container">
<p class="draggable" draggable="true">1</p>
<p class="draggable" draggable="true">2</p>
</div>
<div class="container">
<p class="draggable" draggable="true">3</p>
<p class="draggable" draggable="true">4</p>
</div>
</body>
const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', () => {
draggable.classList.add('dragging')
})
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging')
})
})
containers.forEach(container => {
container.addEventListener('dragover', e => {
e.preventDefault()
const afterElement = getDragAfterElement(container, e.clientY)
const draggable = document.querySelector('.dragging')
if (afterElement == null) {
container.appendChild(draggable)
} else {
container.insertBefore(draggable, afterElement)
}
})
})
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect()
const offset = y - box.top - box.height / 2
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child }
} else {
return closest
}
}, { offset: Number.NEGATIVE_INFINITY }).element
}body {
margin: 0;
}
.container {
background-color: #333;
padding: 1rem;
margin-top: 1rem;
}
.draggable {
padding: 1rem;
background-color: white;
border: 1px solid black;
cursor: move;
}
.draggable.dragging {
opacity: .5;
}