如何用Vue实现具有拖拽功能的树形结构界面？

本文共计1137个文字，预计阅读时间需要5分钟。

最近用Vue做了一个小项目--可拖拽的树状结构图。Vue递归组件+结构通过Vue递归组件实现，布局使用flex，结构线由CSS伪类实现。需要注意的是，居中布局，当X轴元素过多导致子元素宽度超过。

最近用vue做了一个小项目--可拖曳的树状结构图。

Vue递归组件

结构通过Vue的递归组件实现

布局使用flex，结构线由CSS伪类实现

需要注意的是居中布局，当X轴元素过多导致子元素宽度超出视图，元素居中后虽然有滚动条，但只能到达右边的内容，左边的内容会无法访问，可以把父元素设置为inline-flex，宽度设置为auto。当然，如果是上述的结构则不会有这个问题，但遇到大数据渲染，还是困扰我了一下午。

drag事件

首先在需要在拖动的元素上绑定draggable属性，除了<a>和<img>标签设默认为true，其他元素都需要设置下

然后是三个事件dragend、dragover、drop(用Vue写的，就不在事件前加on了)

注意dragover需要去除默认行为，在事件中给上$event.preventDefault()，否则拖曳时鼠标会有🚫标志，使拖动无效。