Как сделать перетаскивание vue без библиотек? - PullRequest
0 голосов
/ 23 марта 2020

Я пытаюсь создать функциональность перетаскивания для моего приложения без внешних библиотек (просто для практики). Я понятия не имею, с чего начать - я уже пытался сделать это с помощью 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. Может быть, я не в том направлении, поэтому не стесняйтесь указывать мне правильный

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...