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 获取初始化坐标原点

<template>
  <div>
    <div class="AllTree">
            <!-- cursor:move->鼠标移动上变成可拖拽的样式 -->
            <!-- 通过绑定唯一ID 获取初始化坐标原点 -->
            <vue2-org-tree
            style="#fafafa;cursor:move"
            v-drag
            id="dragFather"
            :data="treeData"
           />
        </div>
  </div>
</template>

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样式

<style scoped>
::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none !important;
    }
</style>
<style lang="less" >
// 整体的结构设置
.AllTree {
    font-size: 12px;
    transform: rotateY(180deg);
    overflow: auto;             
    // 修改组件内置的样式
    .org-tree-node-label .org-tree-node-label-inner {
        cursor: pointer;
        padding: 0;
    }
    // 子节点
    .org-tree-container {
        position: relative;     /*定位*/
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 600px;
    }
}

// 节点样式
.ReNode {
    height: 40px;
    min-width: 50px;
    transform: rotateY(180deg);
    background-color: rgb(238, 244, 246);
    display: flex;
    line-height: 40px;
    padding: 0 10px;
}

</style>

三. 特别注意

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

四.代码汇总

<template>
  <div>
    <div class="AllTree">
            <!-- cursor:move->鼠标移动上变成可拖拽的样式 -->
            <!-- 通过绑定唯一ID 获取初始化坐标原点 -->
            <vue2-org-tree
            style="#fafafa;cursor:move"
            v-drag
            id="dragFather"
            :data="treeData"
           />
        </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据
      treeData: {
                id: 0,
                name: "",
                children: []
            },
    };
  },
  // 切换页面初始化加载坐标位置保持页面垂直居中对齐
  activated() {
      // 初始化初始坐标
      const dialogHeaderEl = document.querySelector('#dragFather')
      dialogHeaderEl.style.left=0 + 'px';
      dialogHeaderEl.style.top=0 + 'px';
  },
      // 开启拖拽的指令
      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
                        }
                    }
                }
            }
        }
    },
};
</script>

<style scoped>
::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none !important;
    }
</style>
<style lang="less" >
// 整体的结构设置
.AllTree {
    font-size: 12px;
    transform: rotateY(180deg);
    overflow: auto;             
    // 修改组件内置的样式
    .org-tree-node-label .org-tree-node-label-inner {
        cursor: pointer;
        padding: 0;
    }
    // 子节点
    .org-tree-container {
        position: relative;     /*定位*/
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 600px;
    }
}

// 节点样式
.ReNode {
    height: 40px;
    min-width: 50px;
    transform: rotateY(180deg);
    background-color: rgb(238, 244, 246);
    display: flex;
    line-height: 40px;
    padding: 0 10px;
}

</style>