vue实现组件拖拽功能

最新推荐文章于 2024-09-28 23:29:59 发布

阳光6号

最新推荐文章于 2024-09-28 23:29:59 发布

阅读量1.1k

点赞数

分类专栏： js vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_37744901/article/details/106815483

版权

js 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

/*
组件拖拽插件 by lwj
使用方法：导入此插件，使用mixins混入对象
在需要拖拽的元素添加如下方法即可：
<div οndragstart="return false;" οndrοp="return false;" draggable="false" 
@mousedown="onMousedown($event, 'lvs-broadcast__m-header')">
*/
export const dragPlugin = {
  data() {
    return {
      isDown: false, //鼠标是否按下
      moveX: 0,
      moveY: 0, //实时监听鼠标位置
      click_x: 0,
      click_y: 0, //鼠标按下瞬间的位置
      div_x: 0,
      div_y: 0, //元素的位置,
      elementObj: null,
      clickCicleTime: '' //根据mousedown和up的时间差判断是否是点击事件
    }
  },

  methods: {
    onMousedown(e, className) {
      if (!e || !className) {
        return;
      }
      this.clickCicleTime = + new Date()
      this.click_x = e.clientX
      this.click_y = e.clientY
      this.isDown = true
      //获取DIV的位置
      this.elementObj = document.getElementsByClassName(className)[0];
      this.div_x = this.elementObj.offsetLeft
      this.div_y = this.elementObj.offsetTop

      let self = this;
      document.addEventListener('mousemove', function (e) {
        self.dragMouseMove(e);
      })
      this.elementObj.addEventListener('mouseup', function (e) {
        e.stopPropagation();
        e.preventDefault();
        self.onMouseup(e);
      })
    },
    onMouseup(e) {
      var event = (e) ? e : window.event;
      event.stopPropagation();// 其它浏览器下阻止冒泡
      event.preventDefault();

      let _clickCicleTime = + new Date()
      let differTime = _clickCicleTime - this.clickCicleTime
      if (differTime < 200 && this.isDown) {
        if (this.elementObj && this.elementObj.className == 'lvs-broadcast__zoom-out') {
          this.showPanel = !this.showPanel;
        }
      }
      this.isDown = false
      this.mouseMoveX = 0
      this.mouseMoveY = 0
      document.removeEventListener('mousemove', this.dragMouseMove)
      this.elementObj.removeEventListener('mouseup', this.onMouseup)
    },
    dragMouseMove(e) {
      this.moveX = e.clientX
      this.moveY = e.clientY
      //计算鼠标移动偏移量
      this.mouseMoveX = this.moveX - this.click_x
      this.mouseMoveY = this.moveY - this.click_y
      //当鼠标按下时才执行
      if (this.isDown) {
        var new_div_x = this.div_x + this.mouseMoveX
        var new_div_y = this.div_y + this.mouseMoveY
        this.elementObj.style.left = new_div_x + 'px'
        this.elementObj.style.top = new_div_y + 'px'
      }
    }
  }
}


调用：
import { dragPlugin } from 'xxx'
  mixins: [dragPlugin],