如何通过在Vue中单击来以编程方式触发可拖动的“移动”事件？

Question

我有一组垂直排列的卡，当前可拖动。当您将一张卡拖到另一张卡上时，您会看到该卡为半透明卡，悬停在目标位置上，然后放开，这些卡位于交换位置下方。

我想知道如何触发该行为（交换位置/显示上/下动画）而无需拖动例如。单击上/下箭头。

要澄清：“触发事件”是指不调用响应移动事件（结束）的方法，而是使卡移动，就像鼠标/手指向一个方向拖动卡一样（上/下）。

现在我添加了一个位置开关，可以对数组重新排序，但是它不会触发视觉方面。拖动。您只会看到闪光灯，然后按不同的顺序排列卡。

查看视觉行为

before move

during move

after move

可拖动组件

<draggable v-model="things" :move="checkPosition" :options={animation:500}">
  <div v-for="(thing, index) in things">
    <div class="up" @clickSort"('up', index)">
    <div class="down" @clickSort"('up', index)">
  </div>
</draggable>

相关JS方法

watch: {
  things: {
    // this fires when you sort by dragging, as well as button click
    // loop over things
    // update vuex
  }
}

checkPosition(event) {
  if (event.related) {
    // code that keeps draggable item pos in scope of existing elements
    // some are hidden
    return !event.related.classList.contains('locked');
  }
}

clickDrag(direction, itemPos) {
  // manual array sorting, no draggable event eg. hover/motion/transition
}

Answer 1

要创建此过渡效果，必须使用Vue https://vuejs.org/v2/guide/transitions.html提供的Enter / Leave Transition

您需要定义在触发动画时Vue将应用于组件的css动画样式，例如ondrop事件。