Drag-N-Drop

drag-n-drop.markdown

Drag-N-Drop

A Pen by Christopher Birster on CodePen.

License.

index.html

<div class="mx-auto mt-10 space-x-2 w-4/5 flex items-center justify-center">
<div class="flex flex-col container justify-center bg-indigo-500 p-4 h-[300px] rounded-lg shadow-lg">
  <p class="draggable m-1 w-full" draggable="true">Item 1</p>
  <p class="draggable m-1 w-full" draggable="true">Item 2</p>
</div>
<div class="flex flex-col container justify-center bg-orange-500 p-4 h-[300px] rounded-lg shadow-lg">
  <p class="draggable m-1 w-full" draggable="true">Item 3</p>
  <p class="draggable m-1 w-full" draggable="true">Item  4</p>
</div>
  <div class="flex flex-col container justify-center bg-green-500 p-4 h-[300px] rounded-lg shadow-lg">
  <p class="draggable m-1 w-full" draggable="true">Item 5</p>
  <p class="draggable m-1 w-full" draggable="true">Item 6</p>
</div>
</div>
      

script.js

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')
let activeElement = null; 

draggables.forEach(draggable => {
  // TOUCH EVENTS
  draggable.addEventListener('touchstart', (e) => {
    draggable.classList.add('dragging');
    activeElement = draggable; 
      console.log('Touch start w/ ', activeElement);
    e.preventDefault(); // Prevent scrolling when touching
  });

  draggable.addEventListener('touchend', () => {
console.log('Touch end');
    if(activeElement) {
      activeElement.classList.remove('dragging');
      activeElement = null; // Reset active element when dropping
    }
  });
 
  // DRAG EVENTS
  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)
    }
  })
  container.addEventListener('touchmove', e => {
    e.preventDefault();
    if (!activeElement) return; // Only proceed if there's an active element

    const touchY = e.touches[0].clientY; // Get the Y coordinate of the touch
    const afterElement = getDragAfterElement(container, touchY);
    const draggable = document.querySelector('.dragging');

    if (draggable) {
      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
}

scripts

<script src="https://cdn.tailwindcss.com"></script>

style.css

.draggable {
  padding: 1rem;
  background-color: white;
  border: 1px solid black;
  cursor: grab;
}

.draggable.dragging {
  opacity: 0.8;
  background-color: skyblue;
  cursor: grabbing;
}

.draggable, .container {
  touch-action: none;
}