温馨提示×

温馨提示×

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

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

Vue如何实现可拖拽组件

发布时间:2021-09-15 12:43:03 阅读:187 作者:小新 栏目:开发技术
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要为大家展示了“Vue如何实现可拖拽组件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue如何实现可拖拽组件”这篇文章吧。

描述:

组件仅封装拖拽功能,内容通过#header、#default、#footer插槽 自定义

效果: 

Vue如何实现可拖拽组件

代码:

<template>
  <div
    ref="wrapper"
    class="drag-bar-wrapper"
  >
    <div
      ref="header"
      class="drag-bar-header"
    >
      <!-- 头部区域 -->
      <slot name="header" />
    </div>
    <div class="drag-bar-content">
      <!-- 主内容区域 -->
      <slot name="default" />
    </div>
    <div class="drag-bar-footer">
      <!-- 底部区域 -->
      <slot name="footer" />
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      wrapperDomnull,
      headerDomnull,
 
      disX0,
      disY0,
 
      minLeft0,
      maxLeft0,
 
      minTop0,
      maxTop0,
 
      prevLeft0,
      prevTop0,
    };
  },
  methods: {
    initDrag() {
      this.wrapperDom = this.$refs.wrapper;
      this.headerDom = this.$refs.header;
      this.headerDom.addEventListener('mousedown'this.onMousedownfalse);//点击头部区域拖拽
    },
    onMousedown(e) {
      this.disX = e.clientX - this.headerDom.offsetLeft;
      this.disY = e.clientY - this.headerDom.offsetTop;
 
      this.minLeft = this.wrapperDom.offsetLeft;
      this.minTop = this.wrapperDom.offsetTop;
 
      this.maxLeft =
        window.innerWidth - this.minLeft - this.wrapperDom.offsetWidth;
      this.maxTop =
        window.innerHeight - this.minTop - this.wrapperDom.offsetHeight;
 
      const { left, top } = getComputedStyle(this.wrapperDomfalse);
      this.prevLeft = parseFloat(left);
      this.prevTop = parseFloat(top);
 
      document.addEventListener('mousemove'this.onMousemovefalse);
      document.addEventListener('mouseup'this.onMouseupfalse);
      document.body.style.userSelect = 'none'//消除拖拽中选中文本干扰
    },
    onMousemove(e) {
      let left = e.clientX - this.disX;
      let top = e.clientY - this.disY;
 
      if (-left > this.minLeft) {
        left = -this.minLeft;
      } else if (left > this.maxLeft) {
        left = this.maxLeft;
      }
 
      if (-top > this.minTop) {
        top = -this.minTop;
      } else if (top > this.maxTop) {
        top = this.maxTop;
      }
 
      this.wrapperDom.style.left = this.prevLeft + left + 'px';
      this.wrapperDom.style.top = this.prevTop + top + 'px';
    },
    onMouseup() {
      document.removeEventListener('mousemove'this.onMousemovefalse);
      document.removeEventListener('mouseup'this.onMouseupfalse);
      document.body.style.userSelect = 'auto'//恢复文本可选中
    },
  },
  mounted() {
    this.initDrag();
  }
};
</script>
 
<style scoped>
.drag-bar-wrapper {
  position: fixed;
  z-index2;
  top50%;
  left50%;
  transformtranslate(-50%, -50%);
  display: flex;
  flex-direction: column;
}
.drag-bar-header {
  background-color#eee;
  cursor: move; /*拖拽鼠标样式*/
}
.drag-bar-content {
  background-color#fff;
}
.drag-bar-footer {
  background-color#fff;
}
</style>

以上是“Vue如何实现可拖拽组件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

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

vue
AI

开发者交流群×