vue-组件可拖拽案例

涉及到的知识

• 事件方法
  dragstart，dragenter，dragend
• 事件对象e的属性值获取

e.target;//拖拽对象
e.clientX;//获取鼠标相对于浏览器的坐标x的位置
e.clientY;//获取鼠标相对于浏览器的坐标H的位置
e.pageX;//获取鼠标相对于整个文档的坐标x
e.pageY;//获取鼠标相对于整个文档的坐标h

• $refs对dom对象属性的设置和获取

//获取
let w = this.$refs.你设置的ref名称.clientWidth;   // 获取标签属性
//设置
this.$refs.你设置的ref名称.style.top = 20px;//单属性设置
this.$refs.你设置的ref名称.style = ‘left:20px;top:30px’；//多属性设置

代码演示

<template>
    <div 
        id="navBox" 
        draggable="true"
        @dragstart.stop="onDragStart"
        @dragenter.stop="onDragEnter"
        @dragend.stop="onDragEnd"
        ref="navDom"
        >
        <ul class="navLeft">
            <li v-for="item in navList" v-bind:key="item.title" @click="$router.push(item.url)">{{item.title}}</li>
        </ul> 
    </div>
       
</template>
<script>

    //可拖动？

// 引入状态管理模式-store
import {store} from '../store/store.js'

    export default{
        name:'NavLeftStart',
        props:{
            navList:Array,
        },
        data(){
            return{
                isFold:false,
                styleNmae:'navLeft',
                animNmae:'anmHide'
            }
        },
        methods:{
            onDragStart(e){//开始拖拽
                console.log(e,'拖拽开始');
                let target = e.target;//拖拽对象
                let mouseXforW = e.clientX;//获取鼠标相对于浏览器的坐标x的位置
                let mouseHforW = e.clientY;//获取鼠标相对于浏览器的坐标H的位置
                let mouseXforDom=e.pageX;//获取鼠标相对于整个文档的坐标x
                let mouseHforDom=e.pageY;//获取鼠标相对于整个文档的坐标h
                
            },
            onDragEnter(e){//拖拽中
                console.log(e,'拖拽中');
            },
            onDragEnd(e){//拖拽结束
                console.log(e,'拖拽结束');
                // 获取拖拽结束时鼠标的坐标点
                let target = e.target;//拖拽对象
                let mouseX = e.clientX;
                let mouseY = e.clientY;

                // 获取拖拽对象宽度
                let w = this.$refs.navDom.clientWidth;   // 获取标签属性
                let h = this.$refs.navDom.clientHeight;
                
                // this.$refs.navDom.style.left = mouseX - w/2+'px';
                // this.$refs.navDom.style.top = mouseY - h/2+'px';
                this.$refs.navDom.style = `left:${mouseX - w/2}px;top:${mouseY - h/2}px`
               
                console.log(this.$refs.navDom.clientHeight,'pp')
            }
        },
      
    }
</script>
<style scoped>
#navBox{
    position: fixed;
    left: 10px;
    top:200px;
    z-index: 1000;
}
.navLeft{
    list-style: none;
    width: auto;
    height: auto;
    background: #99CC99;
    border-radius: 50px;
    overflow: hidden;
    transition: all .2s ease-in-out;
    box-shadow: 1px 2px 13px 0px #33663361;
}
.navLeft li{
    padding: 10px;
    font-size: 18px;
    color: #336633;
    width: 100%;
    text-align: center;
    /* line-height: 40px; */
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
.navLeft li:nth-child(1){
    padding-top: 20px;
}
.navLeft li:nth-last-child(1){
    padding-bottom: 20px;
}
.navLeft li:hover{
    background: #669933;
    /* color: #fff; */
}
.anmHide{
    height: auto;
    /* animation: anmateHeight 0.4s ease-in-out inherit;
    animation-iteration-count:1; */
}

</style>

github地址：

路径：https://github.com/wyweb1/lxaboutVue/blob/main/src/components/NavLeftStart.（地址：https://github.com/wyweb1/lxaboutVue/）
根据路径找该组件的文件夹位置