js实现拖拽，经过、放置目标元素时添加边框动画![PixPin_2024-04-01_13-10-54.gif](htt

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #ccc;
      padding: 20px;
    }
    #box,
    #box2,
    #box3,
    #box4 {
      width: 300px;
      height: 200px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }
    ul > li {
      list-style: none;
    }

    /* 旋转动画 */
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    p {
      margin-right: 20px;
      margin-top: 0px;
    }
    /* 容器 */
    .box-wrap {
      width: 300px;
      height: 200px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }

    .border-layer {
      background-image: conic-gradient(from 45deg, #ffbe44 0deg 90deg, #5dade2 90deg 180deg, #ee5732 180deg 270deg, #2ecc71 270deg 360deg);
      position: absolute;
      left: 50%;
      top: 50%;
      width: 370px;
      height: 370px;
      margin-left: -185px;
      margin-top: -185px;
      animation: 6s infinite linear rotate;
    }
    /* 旋转动画 */
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    /* 内容层 */
    .box-wrap #box,
    .box-wrap #box2,
    .box-wrap #box3,
    .box-wrap #box4 {
      width: 292px;
      height: 192px;
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      position: absolute;
      top: 4px;
      left: 4px;
      padding: 10px;
      box-sizing: border-box;
    }
  </style>
  <body>
    <div style="display: flex">
      <p draggable="true" id="p">This text be dragged.</p>

      <div class="box-wrap">
        <div></div>
        <div id="box" draggable="false">2</div>
      </div>
      <div class="box-wrap">
        <div></div>
        <div id="box2" draggable="false">2</div>
      </div>
      <div class="box-wrap">
        <div></div>
        <div id="box3" draggable="false">2</div>
      </div>
      <div class="box-wrap">
        <div></div>
        <div id="box4" draggable="false">2</div>
      </div>
    </div>

    <script>
      const p = document.getElementById("p");
      p.addEventListener("dragstart", dragstartFn);
      function dragstartFn(e) {
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("text/plain", e.target.innerHTML);
      }
      const box = document.getElementById("box");
      const box2 = document.getElementById("box2");
      const box3 = document.getElementById("box3");
      const box4 = document.getElementById("box4");
      const borderlayer = document.querySelector(".border-layer");
      [box, box2, box3, box4].forEach((item, index) => {
        item.addEventListener("drop", (e) => {
          e.target.innerHTML = e.dataTransfer.getData("text/plain");
        });

        // 当被拖拽元素停留在该元素（持续触发）
        item.addEventListener("dragover", (e) => {
          e.preventDefault();
          e.dataTransfer.dropEffect = "move";
        });

        // 进入目标元素时 添加边框
        item.addEventListener("dragenter", (e) => {
          e.preventDefault();
          item.style.boxSizing = "border-box";
          //  获取当前元素的上一级，并且添加类名
          item.previousElementSibling.classList.add("border-layer");
        });

        // 离开时去除边框
        item.addEventListener("dragleave", (e) => {
          e.preventDefault();
          item.previousElementSibling.classList.remove("border-layer");
        });

        // 当拖拽事件在合法的目标元素上释放时（松开鼠标按键时）去除边框
        item.addEventListener("drop", (e) => {
          e.preventDefault();
          item.previousElementSibling.classList.remove("border-layer");
        });
      });
    </script>
  </body>
</html>