HTML拖拽API, 看了某位大佬的视频, 有感而发-526互联

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .title {
      width: 1000px;
      margin: 100px auto 0;
      display: flex;
      background-color: #ccc;

      .item1 {
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
      }

      .item2 {
        flex: 2;
        height: 40px;
      }

      .item7 {
        flex: 7;
        height: 40px;
        display: flex;

        .item {
          height: inherit;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
        }
      }
    }

    .c1 {
      background-color: blue;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .c2 {
      background-color: orange;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .c3 {
      background-color: green;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .c4 {
      background-color: purple;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .c5 {
      background-color: orangered;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .c6 {
      background-color: teal;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container {
      width: 1000px;
      margin: 0 auto;
      display: flex;
      background-color: #eee;

      .class_dir {
        flex: 0 0 100px;
        padding: 10px;
      }

      .time_tip {
        flex: 0 0 200px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;


        .time1 {
          height: 160px;
          width: 40px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: #Bbb;

        }

        .time2 {
          height: 160px;
          width: 40px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: #Bbb;
          margin-top: 40px;
        }
      }

      .time_task {
        flex: 0 0 700px;
      }
    }

    .class_dir div {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
      color: #fff;
    }

    .morning,
    .afternoon {
      display: flex;
      flex-wrap: wrap;
    }

    .morning div,
    .afternoon div {
      flex: 0 0 20%;
      width: 140px;
      height: 40px;
      border-top: 1px solid #222;
      border-left: 1px solid #222;
    }

    .morning div:nth-child(5n),
    .afternoon div:nth-child(5n) {
      border-right: 1px solid #222;
    }

    .morning div:nth-child(n + 16),
    .afternoon div:nth-child(n + 16) {
      border-bottom: 1px solid #222;
    }

    .afternoon {
      margin-top: 40px;
    }
  </style>
</head>

<body>
  <div class="title">
    <div class="item1">课程</div>
    <div class="item2"></div>
    <div class="item7">
      <div class="item">周一</div>
      <div class="item">周二</div>
      <div class="item">周三</div>
      <div class="item">周四</div>
      <div class="item">周五</div>
    </div>
  </div>
  <div class="container">
    <div class="class_dir">
      <div
        draggable="true"
        class="c1"
        data-mode="move"
      >政治</div>
      <div
        draggable="true"
        class="c2"
        data-mode="move"
      >高数</div>
      <div
        draggable="true"
        class="c3"
        data-mode="move"
      >音乐</div>
      <div
        draggable="true"
        class="c4"
        data-mode="move"
      >体育</div>
      <div
        draggable="true"
        class="c5"
        data-mode="move"
      >微机</div>
      <div
        draggable="true"
        class="c6"
        data-mode="move"
      >CAD</div>
    </div>
    <div class="time_tip">
      <div class="time1">
        <span>上</span>
        <span style="margin-top: 20px;">午</span>
      </div>
      <div class="time2">
        <span>下</span>
        <span style="margin-top: 20px;">午</span>
      </div>
    </div>
    <div class="time_task">
      <div class="morning">
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
      </div>
      <div class="afternoon">
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
        <div data-mode="receive"></div>
      </div>
    </div>
  </div>

  <script>
    const container = document.querySelector('.container')

    let moveEl = null

    container.addEventListener('dragstart', ev => {
      moveEl = ev.target
    })

    container.addEventListener('dragend', ev => {
      // console.log(ev.target, 'end')
    })

    container.addEventListener('dragenter', ev => {
      // console.log(ev.target, 'enter')
    })

    // 经过的元素, 会一直触发
    container.addEventListener('dragover', ev => {
      ev.preventDefault();
      // console.log(ev, 'over')
    })

    container.addEventListener('drop', ev => {
      const mode = ev.target.getAttribute('data-mode')
      const old = moveEl.getAttribute('data-mode')
      if (old === 'move' && mode === 'receive') {
        const newEl = moveEl.cloneNode(true)
        newEl.setAttribute('data-mode', 'remove')
        ev.target.appendChild(newEl)
      }
      if (old === 'remove' && mode === 'move') {
        moveEl.parentNode.innerHTML = ''
      }
      if (old === 'remove' && mode === 'receive') {
        ev.target.appendChild(moveEl)
      }
    })
  </script>
</body>

</html>