vue递归组件
结构通过vue的递归组件实现
布局使用flex,结构线由css伪类实现
需要注意的是居中布局,当x轴元素过多导致子元素宽度超出视图,元素居中后虽然有滚动条,但只能到达右边的内容,左边的内容会无法访问,可以把父元素设置为inline-flex,宽度设置为auto。当然,如果是上述的结构则不会有这个问题,但遇到大数据渲染,还是困扰我了一下午。
drag事件
首先在需要在拖动的元素上绑定draggable属性,除了<a>和<img>标签设默认为true,其他元素都需要设置下
然后是三个事件dragend
、dragover
、drop
(用vue写的,就不在事件前加on了)
注意dragover
需要去除默认行为,在事件中给上$event.preventdefault()
,否则拖曳时鼠标会有