服务器之家

服务器之家 > 正文

vue 实现可拖曳的树状结构图

时间:2022-02-28 16:27     来源/作者:YouKnow_HRT

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

vue递归组件

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

vue 实现可拖曳的树状结构图

布局使用flex,结构线由css伪类实现

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

drag事件

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

然后是三个事件dragenddragoverdrop(用vue写的,就不在事件前加on了)

注意dragover需要去除默认行为,在事件中给上$event.preventdefault(),否则拖曳时鼠标会有

标签:

相关文章

热门资讯

2022年最旺的微信头像大全 微信头像2022年最新版图片
2022年最旺的微信头像大全 微信头像2022年最新版图片 2022-01-10
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
返回顶部