Блог

Всем привет, я тоже пытаюсь перемещать предметы при перетаскивании на смартфоне

Мой HTML-код:

  <input class="inputText mb-2 border border-primary rounded" v-model="newTodo" 
 @keypress.13='addTodo' placeholder="Scrivi qualcosa"> 
 <button class="btn btn-info" @click="addTodo">
   <i class="far fa-paper-plane"></i>
 </button> 

 <ul class="col-12">
  <div v-for="(todo, n) in todos" draggable="true" @dragstart="dragStart(n, $event)" 
   @dragover.prevent  @dragend="dragEnd" @drop="dragFinish(n, $event)">
   <li class="mt-2 todo">
      anvedi come balla nando   {{ todo.name }}
   </li> 
  </div>
 </ul>
 

Мой код JS:

  const app = new Vue({
   el: '#app',
    data: {
     todos: [{}],
     dragging: -1,
    },
   mounted() {
     if (localStorage.getItem('todos') amp;amp; localStorage.getItem('list')) {
       try {
         this.todos = JSON.parse(localStorage.getItem('todos')); 
         this.list = JSON.parse(localStorage.getItem('list')); 
       } catch (e) {
         localStorage.removeItem('todos'); 
         localStorage.removeItem('list');
       }
     }
   },
    methods: {
     addTodo() {
       if (!this.newTodo) {
         return;
       }
       this.todos.push({
         name: this.newTodo,
         isHidden: true,
         isActive: false,
       });
       this.list.push(this.newTodo   'n'); 
       this.newTodo = ''; 
       this.saveTodos(); 
     },
     dragStart(which, ev) {
       ev.dataTransfer.setData('Text', this.id);
       ev.dataTransfer.dropEffect = 'move';
       this.dragging = which;
     },
     dragEnd(ev) {
       this.dragging = -1;
     },
     dragFinish(to, ev) {
       this.moveItem(this.dragging, to);
       ev.target.style.marginTop = '2px';
       ev.target.style.marginBottom = '2px';
     },
     moveItem(from, to) {
       if (to === -1) {
         this.removeItemAt(from);
       } else {
         this.todos.splice(to, 0, this.todos.splice(from, 1)[0]);
       }
     },
   },
   computed: {
     isDragging() {
       return this.dragging > -1;
     },
   },
 });
 

На ПК это работает идеально, но попытка сделать это на смартфоне не работает…..

Я думаю, что более подробно, чем это, я не могу этого сделать, но стек заставляет меня писать больше слов, потому что я написал слишком много кода и слишком мало текста, но я не думаю, что есть что еще сказать, вопрос ясен и прост, и код тоже!

У меня была такая же проблема в проекте на работе. Мне не удалось решить эту проблему только с помощью VueJS, но я использовал пакет событий vue2-touch, а также interact.js библиотека для более точного управления некоторыми элементами DOM. Я бы рекомендовал vue2-touch-event, если вы не хотите слишком сильно изменять свой код.