温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用vue+ts实现元素鼠标拖动效果

发布时间:2021-11-08 09:05:01 来源:亿速云 阅读:260 作者:iii 栏目:开发技术

这篇文章主要讲解了“怎么用vue+ts实现元素鼠标拖动效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用vue+ts实现元素鼠标拖动效果”吧!

实现效果

怎么用vue+ts实现元素鼠标拖动效果

相关使用属性

// clientX 鼠标相对于浏览器左上角x轴的坐标; 不随滚动条滚动而改变;
// clientY 鼠标相对于浏览器左上角y轴的坐标; 不随滚动条滚动而改变;
// element.offsetTop 指 element距离上方或上层控件的位置,整型,单位像素。
// element.offsetLeft 指 element距离左方或上层控件的位置,整型,单位像素。
// element.offsetWidth 指 element控件自身的宽度,整型,单位像素。
// element.offsetHeight 指 element控件自身的高度,整型,单位像素。
//  clientHeigh = height + 上下padding
//   clientWidth = width+左右padding

实现完整代码

<template>
  <div class="to-do-list" ref="parentBox">
    <div class="search-title">
      <h2 class="add-bold left-box" >
        <a-icon type="unordered-list"  />元素拖动
      </h2>
    </div>
    <a-button ref="moveBtn"  class="move-btn" type="primary"
      >拖动按钮</a-button
    >
  </div>
</template>

<script lang="ts">
import { Component, Emit, Inject, Prop, Ref, Vue, Watch } from 'vue-property-decorator';

@Component({
  components: {},
})
export default class BriberyInformation extends Vue {
  @Ref() readonly moveBtn;
  @Ref() readonly parentBox;

  btnDown() {
    let box = this.moveBtn.$el; //获取button的盒子dom元素
    let parentBox = this.parentBox; //获取button父级元素的dom元素
    let parentH = parentBox.clientHeight; //获取button父级元素的height
    let parentW = parentBox.clientWidth; //获取button父级元素的width

    let x, y;
    let moveX, moveY; //移动距离
    let maxX, maxY; //最大移动距离
    let isDrop = false;

    box.onmousedown = e => {
      x = e.clientX - box.offsetLeft; // e.clientX鼠标相对于浏览器左上角x轴的坐标-button上层控件的位置
      y = e.clientY - box.offsetTop;
      isDrop = true;
    };
    document.onmousemove = e => {
      if (isDrop) {
        e.preventDefault();
        moveX = e.clientX - x; //得到距离左边移动距离
        moveY = e.clientY - y; //得到距离上边移动距离

        //可移动最大距离
        maxX = parentW - box.offsetWidth;
        maxY = parentH - box.offsetHeight;

        //移动的有效距离计算
        //console.log(Math.min(-1, 4, 6, 12));//输出-1-----多个参数,返回最小值
        moveX = Math.min(maxX, Math.max(0, moveX));

        moveY = Math.min(maxY, Math.max(0, moveY));
        box.style.left = moveX + 'px';
        box.style.top = moveY + 'px';
      } else {
        return;
      }
    };
    document.onmouseup = e => {
      e.preventDefault();
      isDrop = false;
    };
  }

  mounted() {
    this.btnDown();
  }
}
</script>
<style scoped lang="less">
.to-do-list {
  position: relative;
  min-height: 600px;
  max-height: 600px;
  width: 600px;
  overflow: hidden;
  border: 2px solid black;
  .move-btn {
    position: absolute;
  }
}
</style>

感谢各位的阅读,以上就是“怎么用vue+ts实现元素鼠标拖动效果”的内容了,经过本文的学习后,相信大家对怎么用vue+ts实现元素鼠标拖动效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI