vue-smooth-dnd 拖放库

关于

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 效果：

https://kutlugsahin.github.io/vue-smooth-dnd/#/copy

注意：

<Draggable /> 内部的可拖拽元素，如 img，需要将其设置为不可拖拽，否则会影响拖拽效果导致异常。

自定义元素上移下移时，展示过渡动画

在 vue-smooth-dnd 中，随着元素往上拖动，上方的元素会自动往下移动，这个动画非常的自然平滑。打开控制台可以看到，移动中元素具有的transition-duration: 250ms; transform: translate3d(0,100px, 0); 这个行内样式。移动后会移除。

通过源码，可知主要通过 setTranslation 和 setAnimation 这两个函数来控制动画。

setTranslation 将计算后的 transform 偏移量写入；或移除该属性；
setAnimation 将写入 transition-duration 属性；或移除该属性；

在此的基础上，想通过js数据驱动，控制元素上移下移，如何保持一致的平滑过渡动画效果？

获取到两个待移动的dom元素，上一个元素往下移动，移动距离为下元素的高度；当前元素往上移动，移动微上一个元素的高度；执行 setTranslation 和 setAnimation，触发移动动作；
移动后，250ms后，执行清除方法，清掉行内样式，并执行数据改变，触发真正的元素移动。

使用

组成组件：

<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，需要将其设置为不可拖拽，否则会影响拖拽效果导致异常。

自定义元素上移下移时，展示过渡动画

通过源码，可知主要通过 setTranslation 和 setAnimation 这两个函数来控制动画。

setTranslation 将计算后的 transform 偏移量写入；或移除该属性；

setAnimation 将写入 transition-duration 属性；或移除该属性；

在此的基础上，想通过js数据驱动，控制元素上移下移，如何保持一致的平滑过渡动画效果？

获取到两个待移动的dom元素，上一个元素往下移动，移动距离为下元素的高度；当前元素往上移动，移动微上一个元素的高度；执行 setTranslation 和 setAnimation，触发移动动作；

移动后，250ms后，执行清除方法，清掉行内样式，并执行数据改变，触发真正的元素移动。