即使在智能手机上也可以在拖动的同时移动项目

问题描述

大家好，我也在尝试在拖动智能手机的同时移动项目

我的 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') && 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,this.todos.splice(from,1)[0]);
       }
     },computed: {
     isDragging() {
       return this.dragging > -1;
     },});

在个人电脑上它可以完美运行，但在智能手机上尝试不起作用......

我觉得比这更详细的我做不到，但是stack迫使我写更多的字，因为我写了太多的代码和太少的文字，但我认为没有更多要说的了，问题简单明了，代码也是！

解决方法

我在工作中的一个项目中遇到了同样的问题。我没有设法仅使用 VueJs 来解决它，但我使用了 vue2-touch-event 包以及 interact.js 库来更精确地控制某些 DOM 元素。如果您不想过多地修改代码，我建议您使用 vue2-touch-event。