Hello everyone, I am looking to make items draggable on a smartphone as well.
Here is my HTML code:
<input class="inputText mb-2 border border-primary rounded" v-model="newTodo"
@keypress.13='addTodo' placeholder="Write something">
<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">
Check out how Nando dances {{ todo.name }}
</li>
</div>
</ul>
This is my JS code:
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;
},
},
});
It works perfectly on a PC, but when testing it on a smartphone, it doesn't seem to function correctly...
I believe that I have provided all the necessary details, but Stack Overflow is prompting me to include more text due to too much code and too little explanation. However, I find the question and code to be clear and concise!