如何解决即使在智能手机上也可以在拖动的同时移动项目
大家好,我也在尝试在拖动智能手机的同时移动项目
我的 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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。