리스트 항목 Drag & Drop으로 재정렬하기

리스트 형태로 구현되어 있는 HTML 문서의 항목을 사용자의 Drag & Drop 동작으로 재정렬하는 방법에 대해서 설명 드리겠습니다.

자료에 대한 출처는 제일 아래 하단에 있으니 참고하시기 바랍니다.

 

실습해보기

아래는 실제로 구현한 내용을 실습해 볼 수 있는 화면입니다.

Drag & Drop의 동작으로 실제로 어떻게 동작하는지 확인 해 보세요.

아래의 출처와는 다른 세로로 정렬된 리스트 항목으로 구성하였습니다.

 

미리 맛 보기:

 

A

B

C

 

위 예제의 전체 소스는 아래와 같습니다.

 

HTML 소스

<div class="container-list">
  <div draggable="true" class="list-box">A</div>
  <div draggable="true" class="list-box">B</div>
  <div draggable="true" class="list-box">C</div>
</div>

 

CSS 소스

.container-list {
  /* display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px; */
}

.list-box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
  margin-top: 10px;
  margin-bottom: 10px;
}

.list-box.over {
  border: 3px dotted #666;
}

 

Javascript 소스

function handleDragStart(e) {
  this.style.opacity = '0.4';
}

function handleDragEnd(e) {
  this.style.opacity = '1';
}

let items = document.querySelectorAll('.container-list .list-box');
items.forEach(function (item) {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragend', handleDragEnd);
});

document.addEventListener('DOMContentLoaded', (event) => {
  function handleDragStart(e) {
    this.style.opacity = '0.4';

    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }

  function handleDragEnd(e) {
    this.style.opacity = '1';

    items.forEach(function (item) {
      item.classList.remove('over');
    });
  }

  function handleDragOver(e) {
    e.preventDefault();
    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('over');
  }

  function handleDragLeave(e) {
    this.classList.remove('over');
  }

  let items = document.querySelectorAll('.container-list .list-box');
  items.forEach(function (item) {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragover', handleDragOver);
    item.addEventListener('dragenter', handleDragEnter);
    item.addEventListener('dragleave', handleDragLeave);
    item.addEventListener('dragend', handleDragEnd);
    item.addEventListener('drop', handleDrop);
  });
});

function handleDrop(e) {
  e.stopPropagation(); // stops the browser from redirecting.

  if (dragSrcEl !== this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }

  return false;
}

 

 

아래의 사이트는 이 포스팅의 소스의 자료 출처이며, 정말 친절하게 잘 설명이 되어있습니다.

처음 이 기능을 만들어가는 과정을 자세히 설명을 해 놓았으니, 한 번 가서 공부해 보는 것도 좋을 것 같습니다.

이 자료를 학습하신다면, 설계부터 코딩해가는 단계를 배울 수 있어서 더 유익할 것입니다.

자료 출처: https://web.dev/drag-and-drop/

HTML5 드래그 앤 드롭 API 사용