Я пытаюсь создать функциональность перетаскивания для моего приложения без внешних библиотек (просто для практики). Я понятия не имею, с чего начать - я уже пытался сделать это с помощью vuex или внешнего класса для управления событиями. Я могу перетаскивать предметы и прочее, но не могу манипулировать данными - я не знаю, как получить ссылки на массив или что-то в экземпляре Vue.
Например, если у меня есть внешний класс, он выглядит так:
export default class DragAndDrop {
constructor() { // some code }
init() {
// add listeners to document
}
mousedownHandler() {
// here i want to sort array of items which item I just clicked
// but it is stored in Vue instance so I can't get access to it
}
// other handlers
}
Моя попытка с vuex:
// store.js
state: {
dragging: null
},
mutations: {
// added this just for the full picture, nothing interesting
setDragging(state, dragging) { // ... },
move(state, {pageX, pageY}) { // ... }
},
actions: {
drag(context, event) {
// here is the same - I want to manipulate an array of items which item I dragging
// change items order, sort, etc
},
move(context, event) {},
mouseup(context, event) {}
}
// App.vue
<template lang="pug">
#app(@mousemove="move" @mouseup="mouseup")
router-view
</template>
// Dragging.vue
<template lang="pug">
.tasks
.task-wrapper.draggable(
v-for="task in tasks"
:key="task._id"
@click="openTaskModal(task._id)" // this event not firing because of @mousedown
@mousedown="drag")
.task {{ task.title }}
</template>
Так Теперь я могу перетаскивать предметы, но это только визуальный эффект. Как манипулировать данными, использовать обратные вызовы и т. Д. c? Я действительно застрял в этом, и я буду признателен за все предложения :(
Итак, вопросы, кратко: 1. Как я могу получить доступ к массиву элементов, элемент которого я перетаскиваю? 2. Как установить несколько событий мыши на предмет? (@mousedown и @click) 3. Может быть, я не в том направлении, поэтому не стесняйтесь указывать мне правильный