gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:42:05 27 4
gpt4 key购买 nike

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

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

澄清:“触发事件”不是调用响应移动事件(结束)的方法,而是使卡片移动,就好像鼠标/手指朝某个方向拖动卡片一样(上/下)。

现在我已经添加了一个位置开关来重新排列数组,但它不会触发视觉方面,例如。拖动。您只看到一个闪光,然后卡片以不同的顺序排列。

查看视觉行为

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
}

最佳答案

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

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

关于vue.js - 如何通过在 Vue 中单击以编程方式触发可拖动的 "move"事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55504499/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com