发布于 2021-11-09, 更新于 2023-04-09
vue-smooth-dnd 拖放库,比起 vuedraggable 动画更顺滑, API 更简单
https://www.npmjs.com/package/vue-smooth-dnd
组成组件:
<Container /> - 可拖拽元素组,内部包含 <Draggable />,可以通过 Group 将多个 Container 组合起来<Draggable /> - 操作的可拖拽元素<Container @drop="onDrop">
<Draggable v-for="item in items" :key="item.id">
<div class="draggable-item">
{{item.data}}
</div>
</Draggable>
</Container>
官方示例:
实现 copy 效果:
注意:
<Draggable /> 内部的可拖拽元素,如 img,需要将其设置为不可拖拽,否则会影响拖拽效果导致异常。
在 vue-smooth-dnd 中,随着元素往上拖动,上方的元素会自动往下移动,这个动画非常的自然平滑。打开控制台可以看到,移动中元素具有的transition-duration: 250ms; transform: translate3d(0,100px, 0); 这个行内样式。移动后会移除。
通过源码,可知主要通过 setTranslation 和 setAnimation 这两个函数来控制动画。
transform 偏移量写入;或移除该属性;transition-duration 属性;或移除该属性;在此的基础上,想通过js数据驱动,控制元素上移下移,如何保持一致的平滑过渡动画效果?