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’；//多属性设置

代码演示

github地址：

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