|
|
26 0
Блоки drag and drop - приклад реалізації
Можна використовувати вбудовані функції drag and drop. Щоб дозволити переміщення блоків.
 Спробуйте пересунути блоки нижче:
Виконуваний код:
<![CDATA[<ul class="tasks__list_img">
<li class="tasks__item_img" draggable="true">1<img src="" alt=""/></li>
<li class="tasks__item_img" draggable="true">2<img src="" alt=""/></li>
<li class="tasks__item_img" draggable="true">3<img src="" alt=""/></li>
<li class="tasks__item_img" draggable="true">4<img src="" alt=""/></li>
<li class="tasks__item_img" draggable="true">5<img src="" alt=""/></li>
</ul>
<style>
.tasks__item_img { width: 80px; border: 3px solid #333; border-radius: 0.5rem; margin: 1.25rem; display: inline-block; justify-content: center; align-items: center; text-align: center; font-weight: bold; user-select: none; cursor: move; transition: 0.5s; }
.tasks__item_img { cursor: move; }
.tasks__item_img.dragging { border: 2px dashed #ccc; } .tasks__list_img.dragging { border: 2px dashed red; }
</style>
<script>
function DragenDrops(){
const peresyvList = document.querySelectorAll('.tasks__item_img');
let dragSrcEl = null;
function handleDragStart(e) {
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
peresyvList.forEach((peresyv) => {
peresyv.addEventListener('dragstart', handleDragStart, false);
peresyv.addEventListener('dragover', handleDragOver, false);
peresyv.addEventListener('drop', handleDrop, false);
});
let draggable = document.querySelector('.tasks__item_img');
draggable.addEventListener('dragenter', function(event) {
// задаємо стилі при наведенні курсора
event.target.style.backgroundColor = 'red';
});
draggable.addEventListener('dragleave', function(event) {
// повертаємо стилі до попереднього стану при відведенні курсора
event.target.style.backgroundColor = 'transparent';
});
// Додаємо краси:========================================
const draggableElems = document.querySelectorAll('.tasks__item_img');
let draggedElem = null;
draggableElems.forEach(elem => {
elem.addEventListener('dragstart', () => {
// Додаємо клас при початку перетягування
elem.classList.add('dragging');
draggedElem = elem;
});
elem.addEventListener('dragend', () => {
// Видаляємо клас при завершенні перетягування
elem.classList.remove('dragging');
draggedElem = null;
});
});
// Можна також встановити клас для блоку над яким знаходиться перетягуваний елемент
const container = document.querySelector('.tasks__list_img');
container.addEventListener('dragover', event => {
event.preventDefault();
const afterElem = getDragAfterElement(container, event.clientY);
const draggableElem = document.querySelector('.dragging');
if (afterElem == null) {
container.appendChild(draggableElem);
} else {
container.insertBefore(draggableElem, afterElem);
}
});
// Функція для визначення блоку, над яким знаходиться перетягуваний елемент
function getDragAfterElement(container, y) {
const draggableElems = [...container.querySelectorAll('.tasks__item_img:not(.dragging)')];
return draggableElems.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;
}
}
DragenDrops();
</script>]]>
|
|