vue.js - 如何通过在 Vue 中单击以编程方式触发可拖动的 "move"事件？

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 提供的 Enter/Leave Transition https://v2.vuejs.org/v2/guide/transitions.html

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