He seguido este video para hacer elementos de arrastrar y soltar. Ya los hice funcionar en la dirección X, pero ahora también necesito verificar la dirección Y para encontrar el elemento de los armarios. por lo tanto, es posible mover el elemento en cualquier fila, a diferencia de ahora, ya que solo verifica la primera fila.
<html> <head> <title>Testing</title> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> </head> <body> <div class="h-64 grid grid-cols-3 gap-4 bg-gray-400 draggable-container"> <div class="bg-red-500 w-full h-32 draggable" draggable="true">1</div> <div class="bg-red-500 w-full h-32 draggable" draggable="true">2</div> <div class="bg-red-500 w-full h-32 draggable" draggable="true">3</div> <div class="bg-red-500 w-full h-32 draggable" draggable="true">4</div> <div class="bg-red-500 w-full h-32 draggable" draggable="true">5</div> </div> <script src="{{ asset('js/products.js') }}"></script> </body> </html> const _doc = document; const draggables = _doc.querySelectorAll('.draggable'), constainers = _doc.querySelectorAll('.draggable-container'); draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging'); draggable.style.opacity = 0.5; }); draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging'); draggable.style.opacity = 1; }) }) constainers.forEach(container => { container.addEventListener('dragover', (event) => { event.preventDefault() const draggable = _doc.querySelector('.dragging'); const afterElement = getDragAfterElement(container, event.clientX, event.clientY); if (afterElement == null) { container.appendChild(draggable); } else { container.insertBefore(draggable, afterElement); } }) }) function getDragAfterElement(container, x, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect(); const offsetX = x - box.left - box.width / 2, offsetY = y - box.top - box.height / 2; if (offsetX < 0 && offsetX > closest.offsetX) { return { offset: offsetX, element: child}; } else { return closest; } }, { offsetX: Number.NEGATIVE_INFINITY }).element; }