Vue draggable element with a click event on it?

Question

I am making a Tinder clone type app in Vue. I am using the Vue2InteractDraggable component. This component works great for the use case. But I want to have a click event on the draggable portion, which does not fire (because it interprets the click as a start of a drag, as opposed to a click event).

I would like for it to use a click event if it's clicked and let go, but want it to use the current drag functionality if it's held for more than a certain amount of time. I can't figure out a way to do this, so any advice would be greatly appreciated. Here is an example of the Vue Component that I'm using. The @click on the detail section does not fire.

<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>

Please let me know if you can think of any ideas. I've been hung up on this for a while and cannot find an answer.

Thank you for your help.

Answer 1

Try to add:

@touchstart="expandDetails()"

near:

@click="expandDetails()"