即使在智能手机上也可以一边拖动一边移动项目

Question

大家好，我正在智能手机和上拖动时尝试移动项目

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

在电脑上它运行得很好，但在智能手机上尝试它是行不通的。。。。。

我认为更详细的是我做不到，但堆栈迫使我写更多的单词，因为我写了太多的代码和太少的文本，但我认为没有太多要说的，问题很清楚，很简单，代码也很简单！

Answer 1

我在工作中的一个项目中遇到了同样的问题。我并没有用VueJs解决这个问题，但我使用了vue2touch事件包以及interact.js库来更精确地控制一些DOM元素。如果您不想修改太多代码，我建议您使用vue2touch事件。