Question

我正在尝试为我的应用创建拖放功能，而无需外部库（仅供练习）。我不知道从哪里开始-我已经尝试使用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>

所以现在我可以拖放项目，但这只是视觉效果。如何处理数据，使用回调等？我真的坚持了这一点，我将不胜感激所有建议:(

因此，这些问题简要如下： 1.如何访问要拖动的项目数组？ 2.如何在项目上设置多个鼠标事件？（@mousedown和@click） 3.也许我的方向错误，所以请随时指出正确的方向

如何在没有库的情况下进行拖放？

0 个答案: