Vue перетаскиваемый элемент с событием щелчка на нем?

Question

Я создаю приложение типа клона Tinder в Vue. Я использую компонент Vue2InteractDraggable. Этот компонент отлично работает для варианта использования. Но я хочу иметь событие click для перетаскиваемой части, которая не срабатывает (потому что она интерпретирует щелчок как начало перетаскивания, а не событие click).

Я бы хотел, чтобы он использовал событие щелчка, если на него щелкнули, и разрешил go, но хотел бы, чтобы он использовал текущую функциональность перетаскивания, если он удерживается более определенного времени. Я не могу найти способ сделать это, поэтому любой совет будет принят с благодарностью. Вот пример компонента Vue, который я использую. @ Клик по разделу подробностей не срабатывает.

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

Пожалуйста, дайте мне знать, если вы можете придумать какие-либо идеи. Я был одержим этим некоторое время и не могу найти ответ.

Спасибо за вашу помощь.

Answer 1

Попробуйте добавить:

@touchstart="expandDetails()"

рядом:

@click="expandDetails()"