html拖拽的实现 关键属性 <draggable> 

<!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>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .box1 {
        position: fixed;
        left: 0;
        top: 0;
        width: 602px;
        height: 602px;
        border: 1px solid red;
      }

      .box2 {
        position: fixed;
        right: 0;
        top: 0;
        width: 602px;
        height: 602px;
        border: 1px solid red;
      }

      li {
        float: left;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #222;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <ul class="box1">
      <li draggable="true">1</li>
      <li draggable="true">2</li>
      <li draggable="true">3</li>
      <li draggable="true">4</li>
      <li draggable="true">5</li>
      <li draggable="true">6</li>
      <li draggable="true">7</li>
      <li draggable="true">8</li>
      <li draggable="true">9</li>
      <li draggable="true">10</li>
    </ul>
    <div class="box2"></div>

    <script>
      const lis = document.querySelectorAll(".box1 li");
      const box2 = document.querySelector(".box2");
      const box1 = document.querySelector(".box1");

      let temp = null;

      lis.forEach((i) => {
        i.addEventListener("dragstart", (ev) => {
          console.log("1");
          temp = i;
        });
      });

      box2.addEventListener("dragover", (e) => {
        // 这里阻止默认行为, 是监听不到drop事件的
        e.preventDefault();
      });

      box2.addEventListener("drop", (ev) => {
        box2.append(temp);
      });

      box1.addEventListener("dragover", (e) => {
        e.preventDefault();
      });

      box1.addEventListener("drop", (ev) => {
        box1.append(temp);
      });
    </script>
  </body>
</html>

如此便能实现小球的两边拖拽

 

posted @ 2022-07-22 14:10  深海里的星星i  阅读(121)  评论(0)    收藏  举报