Vue實(shí)現(xiàn)可拖拽組件的方法

更新時(shí)間：2021年09月15日 11:30:43 作者：從不甘到不凡

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)可拖拽組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了Vue實(shí)現(xiàn)可拖拽、拖拽組件，供大家參考，具體內(nèi)容如下

描述：

組件僅封裝拖拽功能，內(nèi)容通過(guò)#header、#default、#footer插槽自定義

效果：

代碼：

<template>
  <div
    ref="wrapper"
    class="drag-bar-wrapper"
  >
    <div
      ref="header"
      class="drag-bar-header"
    >
      <!-- 頭部區(qū)域 -->
      <slot name="header" />
    </div>
    <div class="drag-bar-content">
      <!-- 主內(nèi)容區(qū)域 -->
      <slot name="default" />
    </div>
    <div class="drag-bar-footer">
      <!-- 底部區(qū)域 -->
      <slot name="footer" />
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      wrapperDom: null,
      headerDom: null,
 
      disX: 0,
      disY: 0,
 
      minLeft: 0,
      maxLeft: 0,
 
      minTop: 0,
      maxTop: 0,
 
      prevLeft: 0,
      prevTop: 0,
    };
  },
  methods: {
    initDrag() {
      this.wrapperDom = this.$refs.wrapper;
      this.headerDom = this.$refs.header;
      this.headerDom.addEventListener('mousedown', this.onMousedown, false);//點(diǎn)擊頭部區(qū)域拖拽
    },
    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.wrapperDom, false);
      this.prevLeft = parseFloat(left);
      this.prevTop = parseFloat(top);
 
      document.addEventListener('mousemove', this.onMousemove, false);
      document.addEventListener('mouseup', this.onMouseup, false);
      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.onMousemove, false);
      document.removeEventListener('mouseup', this.onMouseup, false);
      document.body.style.userSelect = 'auto'; //恢復(fù)文本可選中
    },
  },
  mounted() {
    this.initDrag();
  }
};
</script>
 
<style scoped>
.drag-bar-wrapper {
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}
.drag-bar-header {
  background-color: #eee;
  cursor: move; /*拖拽鼠標(biāo)樣式*/
}
.drag-bar-content {
  background-color: #fff;
}
.drag-bar-footer {
  background-color: #fff;
}
</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: