js中实现vue2-org-tree添加自定义拖拽功能

一. 主要思路

1.1通过绑定自定义的指令，获取需要拖动的父子元素，

1.2.添加鼠标按下事件onmousedown，计算出鼠标的相对位置odiv.offsetLeft与odiv.offsetTop，

1.3.鼠标移动事件onmousemove当鼠标移动时触发，移动的时候相对位置加上偏移距离得到对应的坐标点，

1.4.odiv.style.left与 odiv.style.top动态给对应的元素添加位置样式，

1.5.onmouseup():鼠标抬起事件。当鼠标抬起触发，// 移除对鼠标移动事件的监听

 document.onmousemove = null； document.onmouseup = null；

1.6.切换页面初始化加载坐标位置保持页面垂直居中对齐// 初始化初始坐标

二. 分布实施

2.1 template结构，cursor:move->鼠标移动上变成可拖拽的样式，绑定唯一ID 获取初始化坐标原点

2.2 数据结构

data() {
    return {
      // 数据
      treeData: {
                id: 0,
                name: "",
                children: []
            },
    };
  },

2.3 activated()切换页面初始化加载坐标位置保持页面垂直居中对齐，获取id

// 切换页面初始化加载坐标位置保持页面垂直居中对齐
  activated() {
      // 初始化初始坐标
      const dialogHeaderEl = document.querySelector('#dragFather')
      dialogHeaderEl.style.left=0 + 'px';
      dialogHeaderEl.style.top=0 + 'px';
  },

2.4 自定义拖拽指令

// 开启拖拽的指令
      directives: {
        drag: {
            // 指令的定义
            bind: function (el) {
                var odiv = el // 获取当前元素
                let isMouseDown=false;//鼠标按下标记
                // onmousedown()：鼠标按下事件。当鼠标按下时触发。
                odiv.onmousedown = (e) => {
                    if(e.button===0&&!isMouseDown){
                        // 算出鼠标相对元素的位置
                        let offsetLeft = odiv.offsetLeft
                        let offsetTop = odiv.offsetTop
                        var disX = e.clientX
                        var disY = e.clientY
                        // onmosemove()：鼠标移动事件。当鼠标移动时触发
                        document.onmousemove = (e) => {
                            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                            // 结构沿X轴发生翻转X轴坐标变成从左到右计算的时候相反计算，
                            var left = disX - e.clientX 
                            var top = e.clientY - disY
                            // 移动当前元素
                            odiv.style.left = (left + offsetLeft) + 'px'
                            odiv.style.top = (top + offsetTop) + 'px'
                        }
                        isMouseDown=true
                    }
                     // onmouseup():鼠标抬起事件。当鼠标抬起触发
                    //  e.button===0代表点击左键
                    document.onmouseup = (e) => {
                        if(e.button===0){
                            isMouseDown=false;
                            // 移除对鼠标移动事件的监听
                            document.onmousemove = null
                            document.onmouseup = null
                        }
                    }
                }
            }
        }
    },

2.5 style样式

三. 特别注意

由于此图结构是从右到左展示，市面上的树形结构一般是由从左到右，从上到下；要求的结构是从右到左所以在进行编写的时候利用 transform: rotateY(180deg);进行了翻转x轴发生了变化所以此处对于坐标的计算有所不同

四.代码汇总