트렐로 팀프로젝트 html 작성

어제 column CRUD를 간단하게 작성 후 오늘 오전부터는 무엇을할지 정하지 않아서 프론트가 미리 구현되있으면 좀 더 작업을 빨리 진행할 수 있을거 같아 구현을 했습니다.

틀만 구현을 다 마쳤고, 로그인이 되야 다음 작업이 가능하다고해서 민영님이 로그인을 구현해주셨습니다.

프론트를 작업하는데 있어 컬럼과 카드가 드래그가 되야하는데 처음 접하는거라 당황했지만 원빈님이 주신 사이트를 통해 따라 만들었습니다.

해당 코드를 따라했습니다.

<div class="container">
    <button class="draggable" draggable="true">🦊</button>
    <button class="draggable" draggable="true">🐸</button>
</div>
<div class="container">
    <button class="draggable" draggable="true">🐶</button>
    <button class="draggable" draggable="true">🐱</button>
</div>

<script>
const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");

draggables.forEach(draggable => {
  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.clientX);
    const draggable = document.querySelector(".dragging");
    if (afterElement === undefined) {
      container.appendChild(draggable);
    } else {
      container.insertBefore(draggable, afterElement);
    }
  });
});

function getDragAfterElement(container, x) {
  const draggableElements = [
    ...container.querySelectorAll(".draggable:not(.dragging)"),
  ];

  return draggableElements.reduce(
    (closest, child) => {
      const box = child.getBoundingClientRect();
      const offset = x - box.left - box.width / 2;
      // console.log(offset);
      if (offset < 0 && offset > closest.offset) {
        return { offset: offset, element: child };
      } else {
        return closest;
      }
    },
    { offset: Number.NEGATIVE_INFINITY },
  ).element;
}
</script>

참고 사이트
html 드래그