Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
myaijarvis opened this issue Dec 26, 2023 · 1 comment
Open

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

myaijarvis opened this issue Dec 26, 2023 · 1 comment

Comments

@myaijarvis
Copy link

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

注释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/[email protected]/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/[email protected]/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>
@iuroc
Copy link

iuroc commented Jul 17, 2024

把 #draggableBtn { right: 0 } 去掉就行了，如果需要初始状态在右边，那就按下的瞬间把 right 清除掉。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@myaijarvis @iuroc