我使用原生javascript编写了一个拖放代码。当我选择第一个div时,尝试移动到下一个位置时它会自动移动到最后一个位置。
我不想使用jquery库。
我的解决方法是创建一个主div作为容器,这样在容器内部可以轻松移动每个div。
I have attached what I tried, but I don't understand why this is happening.
const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.mainContainer')
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 {
font-family: sans-serif;
}
.mainContainer {
padding: 6px 0;
width: 100%;
}
.draggable {
cursor: move;
display: inline-block;
margin: 0 6px;
z-index: 1;
color: #fff;
background-color: #087ee5;
border: 1px solid #0675d6;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
text-align: center;
max-width: 300px;
min-width: 30px;
border-collapse: separate;
vertical-align: middle;
padding-left: 7px;
padding-right: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.draggable.dragging {
opacity: 0.5;
}
<div class="mainContainer">
<p class="draggable" draggable="true">MOVE 1</p>
<p class="draggable" draggable="true">MOVE 2</p>
<p class="draggable" draggable="true">MOVE 3</p>
<p class="draggable" draggable="true">MOVE 4</p>
</div>