CodePen Embed - Kanban board Drag and Drop API

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="dnd.css" />
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Drag and Drop</h1>
      </header>
      <main>
        <div class="list-wrapper">
          <div class="column">
            <div class="column-header">To Do</div>
            <div class="card-wrapper">
              <div class="card" draggable="true">
                <div class="header">
                  <div class="title">
                    <span>🏃‍♂️ 운동하기</span>
                  </div>
                </div>
                <div class="body">
                  <p>아침에 일어나 운동을 한다.</p>
                </div>
                <div class="caption">padosum</div>
              </div>
              <div class="card" draggable="true">
                <div class="header">
                  <div class="title">
                    <span>🧑‍🍳 점심 만들기</span>
                  </div>
                </div>
                <div class="body">
                  <p>덮밥을 만든다.</p>
                </div>
                <div class="caption">padosum</div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="column-header">Doing</div>
            <div class="card-wrapper">
              <div class="card" draggable="true">
                <div class="header">
                  <div class="title">🏄‍♂️ 서핑하기</div>
                </div>
                <div class="body">
                  <p>🏄‍♂️ 🏄‍♀️ 🏄</p>
                </div>
                <div class="caption">padosum</div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="column-header">Done</div>
            <div class="card-wrapper">
              <div class="card" draggable="true">
                <div class="header">
                  <div class="title">🧑‍🎓 공부하기</div>
                </div>
                <div class="body">
                  <p>
                    https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/drag_event
                  </p>
                </div>
                <div class="caption">padosum</div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <footer></footer>
    </div>
    <!-- <script
      id="DragDropTouch"
      src="https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"
    ></script> -->
    <script src="dnd.js"></script>
  </body>
</html>

body {
  background-color: #f5f5f7;
}

.wrapper {
  padding: 0 80px;
  height: 100%;
}

.list-wrapper {
  display: flex;
  gap: 20px;
}

.column {
  width: 350px;
}

.column > .column-header {
  padding: 0 8px;
}

.card {
  padding: 16px;
  margin-top: 10px;
  border-radius: 6px;
  background-color: white;
  box-shadow: 0px 1px 30px rgb(224 224 224 / 30%);
  cursor: move;
}

.card.dragging {
  opacity: 0.8;
  box-shadow: 0px 0px 4px rgba(204, 204, 204, 0.5),
    0px 2px 4px rgba(0, 0, 0, 0.25);
}

.card.over {
  opacity: 0.4;
  border: 1px solid #0075de;
}

.card .title {
  font-size: 16px;
  font-weight: 700;
}

.card .body {
  font-size: 14px;
  overflow-wrap: break-word;
}

.card .caption {
  font-size: 12px;
  color: #bdbdbd;
}

document.addEventListener('DOMContentLoaded', () => {
  const list = document.querySelector('.list-wrapper')

  list.addEventListener('dragstart', e => {
    const card = e.target.closest('.card')
    if (!card) return

    card.classList.add('dragging')
  })

  list.addEventListener('dragend', e => {
    const card = e.target.closest('.card')
    if (!card) return

    e.target.classList.remove('dragging')
    e.target.classList.remove('over')
  })

  list.addEventListener('dragenter', e => {
    const card = e.target.closest('.card')
    if (!card) return
    e.target.classList.add('over')
  })

  list.addEventListener('dragleave', e => {
    const card = e.target.closest('.card')
    if (!card) return
    e.target.classList.remove('over')
  })

  list.addEventListener('dragover', e => {
    e.preventDefault()
    const column = e.target.closest('.column')
    if (!column) return

    console.log('dragover')

    const dragging = document.querySelector('.dragging')
    const pointedEl = document.elementFromPoint(e.clientX, e.clientY)
    const closestCard = pointedEl.closest('.card')
    if (closestCard) {
      closestCard.before(dragging)
    } else {
      const cardWrapper = column.querySelector('.card-wrapper')
      cardWrapper.appendChild(dragging)
    }
  })

  list.addEventListener('drop', e => {
    e.preventDefault()
    const column = e.target.closest('.column')
    if (!column) return

    console.log('drop!')
  })
})

This Pen is owned by Yeonjeong Choi on CodePen.

See more by @padosum on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.