拖拽功能的实现

最新推荐文章于 2024-07-10 14:36:18 发布

yalik_

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量462

点赞数

分类专栏：学习文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45418844/article/details/122187879

版权

学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用vuedraggable插件实现元素拖拽，包括安装依赖、引入组件、注册组件以及关键的拖拽、允许放下和连接后台接口的代码示例。通过实例展示了如何处理多个文件的拖动和释放，以及与后台的交互过程。

摘要由CSDN通过智能技术生成

1.安装依赖

cnpm install vuedraggable

2.引入依赖

import vuedraggable from 'vuedraggable'

3.注册

components: {

vuedraggable

},

     //拖拽
    drag (item, index) {
      this.resources = []
      if (this.global.currentSelected.length > 1) {
        this.global.currentSelected.forEach(file => {
          this.resources.push(file.filePath)
        })
      }
      else {
        this.resources.push(item.filePath)
      }
      this.global.currentSelected = [];
      this.dataList.forEach(file => file.isSelect = false);
      if (!item.isSelect) {
        this._onSelectAdd(index)
      }
    },
    // 允许放下拖拽
    allowDrop (ev) {
      ev.preventDefault();
    },
    // 放下事件
    drop (item) {
      this.target = item.filePath
      this.handleDrag()

    },

//连接后台接口，参数为放下的文件和拖拽的文件
handleDrag () {
      let that = this;
      let params = {
        "target": this.target  //放下的文件
        "resources": this.resources  //拖拽的文件
      }
      console.log("params", params)
      HTTP.post(this.$urls.file.move, params).then(function (response) {

        var resultData = response.data;
        console.log("resultData", resultData)
        if (resultData) {
          that.$message.success("成功")
          that.$emit("queryHandler");//局部刷新
        }
      }).catch(err => {

        console.log(err);
      });
    },