How to implement draggable components in Vue

This article shares with you how to implement draggable and draggable components in Vue for your reference. The specific content is as follows

describe:

The component only encapsulates the drag function, and the content is customized through the #header, #default, and #footer slots

Effect:

Code:

<template>
  <div
    ref="wrapper"
    class="drag-bar-wrapper"
  >
    <div
      ref="header"
      class="drag-bar-header"
    >
      <!-- Header area -->
      <slot name="header" />
    </div>
    <div class="drag-bar-content">
      <!-- Main content area -->
      <slot name="default" />
    </div>
    <div class="drag-bar-footer">
      <!-- Bottom area -->
      <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);//Click on the header area and drag},
    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'; //Eliminate the interference of selected text during dragging},
    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'; //Restore text to be selectable},
  },
  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; /*Drag mouse style*/
}
.drag-bar-content {
  background-color: #fff;
}
.drag-bar-footer {
  background-color: #fff;
}
</style>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: