javascript - 即使在智能手机上也可以在拖动时移动项目
问题描述
大家好,我也在尝试在智能手机上拖动时移动项目
我的 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;
},
},
});
在电脑上可以正常使用,但是在智能手机上尝试却不行......
我想比那个更详细我做不到,但是堆栈迫使我写更多的文字,因为我写了太多的代码和太少的文字,但我认为没有太多要说的,问题很清楚很简单,代码也很简单!
解决方案
我在工作中的一个项目中遇到了同样的问题。我没有设法仅使用 VueJs 解决它,但我使用了vue2-touch-event包以及interact.js库来更精确地控制一些 DOM 元素。如果您不想过多地修改代码,我建议您使用 vue2-touch-event。
推荐阅读
- angular - '[ngTemplateOutet]' 正在工作,但 '*ngTemplateOutlet' 没有
- node.js - 请求帖子正文未交付给特快专递处理程序
- reactjs - 我应该使用 beforeEach() 安装并为每个测试设置道具还是在每个测试开始时安装特定组件?(使用 Enzyme、Chai 和 Mocha)
- javascript - Workbox 似乎没有从 webpack 构建中预缓存块
- elasticsearch - 弹性搜索:查询新增字段
- ssis - 记录类型会影响使用金汇软件迁移的性能吗?
- python - 从支持向量回归中找到回归方程
- angular - 参考错误:变量未在“onclick”中定义
- svelte - 苗条的反应性减速没有按预期工作
- python - 在直线的末端画一个四分之一圆