原生实现一个拖拽小功能

HTML

  <div class="container">
    <div class="left" data-drop="move">
      <div data-effect="copy" draggable="true" class="color1 item">语文</div>
      <div data-effect="copy" draggable="true" class="color2 item">数学</div>
      <div data-effect="copy" draggable="true" class="color3 item">英语</div>
      <div data-effect="copy" draggable="true" class="color4 item">音乐</div>
      <div data-effect="copy" draggable="true" class="color5 item">政治</div>
      <div data-effect="copy" draggable="true" class="color6 item">历史</div>
      <div data-effect="copy" draggable="true" class="color7 item">体育</div>
    </div>
    <div class="right">
      <table>
        <caption>
          个人每周活动
        </caption>
        <colgroup>
          <col />
          <col span="5" class="weekdays" />
          <col span="2" class="weekend" />
        </colgroup>
        <tr>
          <th>时段</th>
          <th class="header">周一</th>
          <th class="header">周二</th>
          <th class="header">周三</th>
          <th class="header">周四</th>
          <th class="header">周五</th>
          <th class="header">周六</th>
          <th class="header">周日</th>
        </tr>
        <tr>
          <th>上午</th>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
        </tr>
        <tr>
          <th>下午</th>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
          <td data-drop="copy"></td>
        </tr>
      </table>
    </div>
  </div>

CSS

    .container {
      width: 1000px;
      display: flex;
      align-items: center;
    }

    .right {
      margin-left: 30px;
    }

    .item {
      width: 80px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: white;
      font-size: 16px;
      margin: 10px 0;
      cursor: pointer;
    }

    .color1 {
      background-color: red;
    }

    .color2 {
      background-color: rgb(255, 242, 64);
    }

    .color3 {
      background-color: rgb(36, 255, 7);
    }

    .color4 {
      background-color: rgb(0, 195, 255);
    }

    .color5 {
      background-color: rgb(255, 0, 149);
    }

    .color6 {
      background-color: rgb(0, 255, 179);
    }

    .color7 {
      background-color: rgb(174, 0, 255);
    }

    table {
      border-collapse: collapse;
      border: 2px solid rgb(140 140 140);
    }

    caption {
      caption-side: bottom;
      padding: 10px;
    }

    th,
    td {
      border: 1px solid rgb(160 160 160);
      padding: 20px 30px;
      text-align: center;
    }

    .header {
      background-color: #d7d9f2;
    }

    .weekdays {
      /* background-color: #d7d9f2; */
    }

    .weekend {
      /* background-color: #ffe8d4; */
    }

    .drop-over {
      background-color: aquamarine;
    }

 JS

const container = document.querySelector('.container');

    // 拖拽开始
    let source
    container.ondragstart = (e) => {
      e.dataTransfer.effectAllowed = e.target.dataset.effect;
      console.log(e.target, 'start');
      source = e.target
    }

    // 拖拽到那个元素之上
    container.ondragover = (e) => {
      // 因为 td tr 这些标签不能拖拽所以需要 阻止默认行为 
      e.preventDefault();
    }

    function getDropNode(node) {
      while (node) {
        if (node.dataset && node.dataset.drop) {
          return node
        }
        node = node.parentNode;
      }
    }

    function clearDropStyle() {
      document.querySelectorAll('.drop-over').forEach(node => {
        node.classList.remove('drop-over');
      })
    }

    // 只触发一次
    container.ondragenter = (e) => {
      // 清楚之前的
      clearDropStyle()
      const dropNode = getDropNode(e.target)
      if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        // 该节点能接受目前拖拽的节点
        dropNode.classList.add('drop-over');
      }
    }

    // 结束
    container.ondrop = (e) => {
      // console.log(e.target, 'drop');
      clearDropStyle()
      const dropNode = getDropNode(e.target)
      if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        if (dropNode.dataset.drop === 'copy') {
          dropNode.innerHTML = '';
          const cloneNode = source.cloneNode(true);
          cloneNode.dataset.effect = 'move'
          dropNode.appendChild(cloneNode);
        } else {
          // move
          source.remove()
        }
      }
    }