移动过程中会改变元素大小

Question

移动过程中会改变元素大小

myaijarvis opened this issue 6 months ago · comments

移动过程中会改变元素大小（文本部分溢出不可见，按钮变得很宽）

注释draggie.on("dragEnd", function () {}) 代码
在网页上用鼠标拖拽一下按钮，然后点击按钮，即可看到效果

我写出来部分解决办法，仅供参考。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/draggabilly@2.2.0/dist/draggabilly.pkgd.min.css"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #draggableBtn {
        top: 150px;
        right: 0;
        position: fixed;
        z-index: 1000;
        cursor: pointer;
        background: green;
        width: auto;
      }

      .layui-btn {
        display: inline-block;
        vertical-align: middle;
        height: 38px;
        line-height: 38px;
        border: 1px solid transparent;
        padding: 0 18px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }
      .layui-btn-sm {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <button id="draggableBtn" class="layui-btn layui-btn-sm">复制</button>

    <script src="https://unpkg.com/draggabilly@2.2.0/dist/draggabilly.pkgd.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script>
      let draggableBtn = document.getElementById("draggableBtn");
      let config_draggie = {
        axis: "", // 限制移动方向 x,y,''
      };
      let draggie = new Draggabilly(draggableBtn, config_draggie);
      // 解决办法
      draggie.on("dragEnd", function () {
        console.log("dragEnd");
        console.log($(draggableBtn));
        if (config_draggie.axis) {
          if (config_draggie.axis == "x") {
            // 不建议使用，可能会存着属性优先级问题导致属性不生效
            // $(draggableBtn).css({ right: "" });
            $(draggableBtn).css({ right: "auto" });
          } else if (config_draggie.axis == "y") {
            $(draggableBtn).css({ left: "auto" });
          } else {
            $(draggableBtn).css({ left: "auto", right: "auto" });
          }
        } else {
          $(draggableBtn).css({ right: "auto" }); // 因为是从左上角开始计算位置的，所以只需要设置right
        }
      });

      draggableBtn.addEventListener("click", function () {
        // 模拟改变按钮文本的操作
        $(draggableBtn).text("复制成功");
        setTimeout(() => {
          $(draggableBtn).text("复制");
        }, 3000);
      });
    </script>
  </body>
</html>