Как для мобильной версии разрешать перетаскивание только когда взаимодействуем со спаном?

Для обеспечения возможности перетаскивания только при взаимодействии с определенными элементами, такими как <span>, в мобильной версии с использованием Vue.js, вам понадобится использовать такие функции и события, как v-touch или v-touch-swipe, которые предоставляются Vue.js или сторонними библиотеками.

Вот шаги, которые можно предпринять, чтобы реализовать это:

1. Установите необходимую библиотеку, например, "vue-touch" или "hammer.js", которые добавляют поддержку событий касания в ваше приложение Vue.js:

$ npm install vue-touch

2. Импортируйте и зарегистрируйте библиотеку перед созданием экземпляра Vue:

import Vue from 'vue'
import VueTouch from 'vue-touch'

Vue.use(VueTouch)

3. В вашем шаблоне добавьте элемент <span> с указанием мобильных событий, с которыми вы хотите разрешить перетаскивание. Например, если вы хотите, чтобы перетаскивание было разрешено только при перемещении пальцем по элементу, вы можете добавить следующий код:

<template>
  <div>
    <span v-touch:swiperight="onSwipe">
      Перетащите меня
    </span>
  </div>
</template>

4. В вашем методе onSwipe вы можете обрабатывать событие и выполнять необходимую логику, когда пользователь свайпает по элементу <span>:

export default {
  methods: {
    onSwipe() {
      // выполните необходимую логику при свайпе по элементу <span>
    }
  }
}

Теперь, когда пользователь свайпает по элементу <span>, будет вызван метод onSwipe, и вы сможете выполнить определенную логику для обработки этого события.

Обратите внимание, что вам также может потребоваться добавить дополнительный код для подключения библиотеки Vue Touch к вашему проекту или для выполнения других настроек, которые требуются этой библиотекой. Используйте официальную документацию для получения подробной информации о настройке и использовании конкретных библиотек для обработки событий касания в вашем приложении Vue.js.