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

Posted 2023-05-08

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

【英文标题】：How to programmatically trigger a draggable "move" event by a click in Vue?

【发布时间】：2019-08-25 12:49:13

【问题描述】：

我有一组垂直排列的卡片，目前可以拖动。当您将一张卡片拖到另一张卡片上时，您会看到这张卡片是一张悬停在目标位置上的半透明卡片，在您放手之前，下方的卡片会交换位置。

我想知道如何在不拖动的情况下触发该行为（交换位置/显示向上/向下移动的动画），例如。点击向上/向下箭头。

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

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

查看视觉行为

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

【问题讨论】：

在窗口或其他任何地方创建一个MouseEvent 和dispatch。

这是什么意思？如果不清楚，我可以触发与拖动动作相关的事件（正在进行/完成）我目前无法通过单击箭头使卡片移动，就好像它们被拖动一样。我已经考虑添加一些可以真正移动卡片的东西，比如翻译或者我不知道它是否会触发可拖动钩子的东西。当前要移动卡片，您必须通过鼠标或触摸单击/按住/拖动。

要“让卡片像鼠标/手指向一个方向拖动卡片一样移动”，您需要创建事件，就像鼠标在这些情况下所做的那样。您将创建 mousedown、mousemove 和 mouseup 事件，并在可拖动对象上调度它们。

哦，天哪，好吧，我得调查一下，我想知道你是否指定像“像素”，但速度等等……会记住的

@it_is_written 请发布您的解决方案。我也遇到了同样的问题谢谢

【参考方案1】：

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

当你想要触发动画时，你需要定义 Vue 将应用于你的组件的 CSS 动画样式，比如 ondrop 事件。

【讨论】：

是的，我想我只是决定“伪造它”（主要是由于时间限制），通过添加临时类来向上滑动/淡化一点，但最终它与实际的“可拖动”不同事件”，但我可以触发你放手时发生的事件。我不知道我试图做的事情是否可能/有意义。我也无法立即判断拖动释放事件是否会像更新卡片订单状态时那样重新渲染组件。

走这条路虽然看起来很粗糙，但可能应该尝试阻止渲染，或者更好地按照上面的建议使用鼠标事件。至少当类被删除时，它在重新渲染后“弹回原处”。至少我是如何实现它的（使用 css 转换和添加/删除类。

实际上它成功了，当你删除类时我不需要应用转换延迟