Добрый день, есть реализованный drag'n'drop с блокам в колонку, у каждого имеется свой приоритет, и нужно сделать так, чтобы при перетаскивании, приоритет становился соответствующих у элемента, то есть перетащив элемент с 10 приоритет на 4, у него становился 4 и у остальных блоков происходил инкремент, заранее благодарю, вот песочница.
https://codepen.io/forsuren1/pen/mdMrvjP
Так же сам код
<body>
<div class="box">
<div class="item" draggable="true" data-priority="1">1</div>
<div class="item" draggable="true" data-priority="2">2</div>
<div class="item" draggable="true" data-priority="3">3</div>
<div class="item" draggable="true" data-priority="4">4</div>
<div class="item" draggable="true" data-priority="5">5</div>
<div class="item" draggable="true" data-priority="6">6</div>
<div class="item" draggable="true" data-priority="7">7</div>
<div class="item" draggable="true" data-priority="8">8</div>
<div class="item" draggable="true" data-priority="9">9</div>
<div class="item" draggable="true" data-priority="10">10</div>
</div>
<script src="js.js"></script>
</body>
let box = document.querySelector('.box')
let items = document.querySelectorAll('.item')
items.forEach(item => {
item.addEventListener('dragstart', () => {
item.classList.add('dragging')
})
item.addEventListener('dragend', () => {
item.classList.remove('dragging')
box.classList.add('preload')
setTimeout(() => { box.classList.remove('preload') }, 1000)
console.log(item.getAttribute('data-priority'))
})
})
box.addEventListener('dragover', e => {
e.preventDefault();
const afterElement = getDragAfterElement(box, e.clientY)
const draggable = document.querySelector('.dragging')
// console.log(afterElement)
if (afterElement == null) {
box.appendChild(draggable)
} else {
box.insertBefore(draggable, afterElement)
}
})
function getDragAfterElement(box, y) {
const draggableElements = [...box.querySelectorAll('.item:not(.dragging)')]
return draggableElements.reduce((closest, child) => {
const container = child.getBoundingClientRect()
const offset = y - container.top - container.height / 2
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child }
} else {
return closest
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
