有2个元素div，这是一个表的两种模式(side-table和center-table)。当用户在左侧区域拖放中心表时，它会变成边表，反之亦然。
这里我使用js来获取拖动元素的id和掉落元素的id，然后将它们的不透明度设置为0和1。但是浏览器不能获取元素的id。有什么问题吗，有没有别的办法?(靠墙的桌子)[https://drive.google.com/file/d/1GM5eA-AevwqKpYKCGe7vld3OMtRJnvXE/view?usp=sharing]
[演示视频][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>
与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";
}
你可以用我的方案
<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;
}