时间戳

首页 > 解决方案 > 带有点击事件的Vue可拖动元素？

vue.js - 带有点击事件的Vue可拖动元素？

问题描述

我正在 Vue 中制作一个 Tinder 克隆类型的应用程序。我正在使用 Vue2InteractDraggable 组件。该组件非常适合用例。但是我想在可拖动部分上有一个单击事件，它不会触发（因为它将单击解释为拖动的开始，而不是单击事件）。

如果它被单击并放手，我希望它使用一个单击事件，但如果它保持超过一定时间，我希望它使用当前的拖动功能。我想不出办法做到这一点，所以任何建议将不胜感激。这是我正在使用的 Vue 组件的示例。详细信息部分上的@click 不会触发。

<Vue2InteractDraggable
        v-if="cardVisible"
        :interact-out-of-sight-x-coordinate="500"
        :interact-max-rotation="15"
        :interact-x-threshold="200"
        :interact-y-threshold="9999"
        @draggedRight="right()"
        @draggedLeft="left()">
        <div class="flex flex--center">
          <img class="profilePicture" style="z-index: 4" :src="getImageSrc(current.image)"/>
        </div>
        <div class="rounded-borders card card--one">
          <div class="userName">{{ Object.keys(this.users)[this.index] }}</div>
          <div class="userAge">Age: {{current.age}}</div>
          <div class="userDetailExpand" @click="expandDetails()">
            <span>User Details</span>
            <img class="carrot" src="../assets/svg/carrot_expand.svg"/>
          </div>
        </div>
      </Vue2InteractDraggable>

如果您能想到任何想法，请告诉我。我已经挂了一段时间了，找不到答案。

谢谢您的帮助。

标签： vue.jsvuejs2draggableinteract.jsvue.draggable

解决方案

尝试添加：

@touchstart="expandDetails()"

靠近：

@click="expandDetails()"

推荐阅读