Question

有一种在VueJS？中实现拖放的简单方法。我只想将一个div移到另一个。在网络上看，似乎只是用于进行可排序的拖放操作的库

Answer 1

这是使用核心JavaScript开发的基本drag and drop。希望对您有所帮助。

class App {

  static init() {

    App.box = document.getElementsByClassName('box')[0]

    App.box.addEventListener("dragstart", App.dragstart)
    App.box.addEventListener("dragend", App.dragend)

    const containers = document.getElementsByClassName('holder')

    for(const container of containers) {
      container.addEventListener("dragover", App.dragover)
      container.addEventListener("dragenter", App.dragenter)
      container.addEventListener("dragleave", App.dragleave)
      container.addEventListener("drop", App.drop)
    }
  }

  static dragstart() {
    this.className += " held"

    setTimeout(()=>this.className="invisible", 0)
  }

  static dragend() {
    this.className = "box"
  }

  static dragover(e) {
    e.preventDefault()
  }

  static dragenter(e) {
    e.preventDefault()
    this.className += " hovered"
  }

  static dragleave() {
    this.className = "holder"
  }

  static drop() {
    this.className = "holder"
    this.append(App.box)
  }

}

document.addEventListener("DOMContentLoaded", App.init)

Answer 2

问题是要有VueJs组件。

似乎最常用的一种是：https://sortablejs.github.io/Vue.Draggable/#/simple

我可以说效果很好。

在VueJS中拖放

2 个答案: