😎 » JavaScript » Примеры JavaScript » Блоки drag and drop - приклад реалізації
26 0  

Блоки drag and drop - приклад реалізації

Можна використовувати вбудовані функції drag and drop. Щоб дозволити переміщення блоків.

bully Спробуйте пересунути блоки нижче:

  • 1
  • 2
  • 3
  • 4
  • 5

Виконуваний код:

<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>

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023