Touch Events

index.html

<div class="mx-auto mt-10 space-x-2 w-4/5 flex flex-col items-center justify-center">
<div class="flex highlight space-x-4 justify-around w-4/5">
  <p class="border-2 p-4 rounded-lg border-green-400 w-56 text-center touchstart">Touchstart</p>
  <p class="border-2 p-4 rounded-lg border-green-400 w-56 text-center touchmove">Touchmove</p>
  <p class="border-2 p-4 rounded-lg border-green-400 w-56 text-center touchend">Touchend</p>
  <p class="border-2 p-4 rounded-lg border-green-400 w-56 text-center touchcancel">Touchcancel</p>
</div>
 <div class="h-12"></div>
<div class="flex w-4/5">
<div class="flex flex-col container items-center justify-center bg-indigo-500 p-4 h-[300px] rounded-lg shadow-lg">
  <p class="draggable m-1 w-[300px] text-center" draggable="true">Drag Me</p>
</div>
<div class="flex flex-col container justify-center bg-orange-500 p-4 h-[300px] rounded-lg shadow-lg">
</div>
  </div>
</div>
      

script.js

document.addEventListener('DOMContentLoaded', () => { 
  const draggables = document.querySelectorAll('.draggable');
  const containers = document.querySelectorAll('.container');

  function clearEventLabels() {
    document.querySelectorAll('p').forEach(label => {
      label.classList.remove('bg-green-400');
    });
  }

  function handleEventLabel(eventType) {
    const eventLabel = document.querySelector(`.${eventType}`);
    if (eventLabel) {
      eventLabel.classList.add('bg-green-400');
      setTimeout(() => clearEventLabels, 1000)
    }
  }

  draggables.forEach(draggable => {
    draggable.addEventListener('touchstart', (e) => {
      draggable.classList.add('dragging');
      handleEventLabel('touchstart');
    });
    draggable.addEventListener('touchmove', (e) => {
      draggable.classList.add('dragging');
      handleEventLabel('touchmove');
    });

    draggable.addEventListener('touchend', () => {
      draggable.classList.remove('dragging');
      handleEventLabel('touchend');
      setTimeout(clearEventLabels, 1000); 
    });
  });

  containers.forEach(container => {
    container.addEventListener('dragover', (e) => {
      e.preventDefault(); // Allows the drop event to fire
      handleEventLabel('dragover');
    });

    container.addEventListener('dragenter', () => handleEventLabel('dragenter'));
    container.addEventListener('dragleave', () => handleEventLabel('dragleave'));

    container.addEventListener('drop', (e) => {
      e.preventDefault();
      const draggable = document.querySelector('.dragging');
      if (draggable) {
        console.log("this happened")
        const dropper = document.querySelector('.drop').classList.add('bg-green-400');
        container.appendChild(draggable);
       
      }
    });
  });
});

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

touch-events.markdown

Touch Events

A Pen by Christopher Birster on CodePen.

License.