elementUI系列一vue拖拽功能实现-vuedraggable实现多层嵌套拖拽

Posted 2023-04-09 猿如意

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了elementUI系列一vue拖拽功能实现-vuedraggable实现多层嵌套拖拽相关的知识，希望对你有一定的参考价值。

拖拽功能组件

awe-dnd和vue-draggable做了一番比较，最终选择了vue-draggable，至于原因：

vue-draggable的@start和@end只会在拖拽元素移动的开始和结束时触发，过程中不会触发
awe-dnd会一直监听拖拽的过程，在拖拽的过程中会一直打印信息

使用

各项配置介绍：vuedraggable文文档

1.安装 npm或者yarn

yarn add vuedraggable
npm i -S vuedraggable

2.在vue项目中引入draggable

//导入draggable组件
import draggable from 'vuedraggable';
......
export default 
  components: 
    draggable,
  ,
  data() 
    return 
      imageUrlList: []
    ;
  ,
methods: 
    /**
     * @description: 预览的图片添加下载按钮
     */
    clickImage() 
      
    ,
    
    /**
     * @description: 查看-大图预览, 先看当前大图
     * @param Number index 当前下标
     * @param Array imgList 所有大图
     * @return Array arr 当前图片为第一个的大图
     */
    getPreviewList(index, imgList) 
      let arr = [];
      let i = 0;
      for (i; i < imgList.length; i++) 
        arr.push(imgList[i + index].fileUrl);
        if (i + index >= imgList.length - 1) 
          index = 0 - (i + 1);
        
      
      return arr;
    ,

    
  
 
;

3.在模板中使用draggable

<draggable
            v-model="imageUrlList"
            animation="300"
            draggable=".drag-area"
          >
            <div
              class="drag-area"
              v-for="(item, index) in imageUrlList"
              :key="item.fileName"
            >
              <el-image
                @click.stop.prevent="clickImage"
                :src="item.fileUrl"
                :preview-src-list="getPreviewList(index, imageUrlList)"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="el-upload__text">
               <em>点击上传</em>
             </div>
          </draggable>

以下几点需要注意

draggable区域内嵌入多层，要把拖拽区域加上class名称，draggable=‘.class名’,这样就能确保draggable内部分可以拖拽，部分不能拖拽
el-image的点击事件和vue.draggable的拖拽事件会有事件冲突的问题，那么你需要使用.stop和.prevent修饰符来禁止默认事件和冒泡.

-文章搜索）博客论坛项目高仿CSDN（一篇文章精通系列）

Java 之 Spring Boot + Vue + Element UI 前后端分离项目（上-项目搭建）
Java之Spring Boot+Vue+Element UI前后端分离项目（中-功能完善-实现查询）
Java之Spring Boot+Vue+Element UI前后端分离项目（下-功能完善-发布文章-文章搜索）

源代码下载：https://download.csdn.net/download/qq_44757034/85045367
Java SpringBoot 前后端分离项目高仿CSDN项目源代码（前端Vue+Element UI 后端Java的SpringBoot+Myabtis，数据库Mysql）

一、实现文章发布需要使用富文本编辑框

安装富文本编辑框

1、npm安装

npm install vue-quill-editor     //富文本编辑器

npm install quill           //依赖项

2、创建Write.vue

<template>

  <div style="width: 90%; background-color: #99a9bf;margin: auto;top: 0px;left: 0px">

    <div style="width:80%;background-color: white;margin: auto;">

      <div style="clear: both"></div>
      <el-input style="margin-top: 50px;width: 80%" v-model="title" placeholder="请输入文章标题"></el-input>

      <div style="text-align: left;width: 80%;margin: auto;margin-top: 30px ">
        上传文章缩略图：
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9090/image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" style="border-style: solid;border-radius: 15px"></i>
        </el-upload>
      </div>
      <div style="clear: both"></div>
      <div style="margin-top: 20px;float:left; margin-left: 130px ">
        是否原创：
        <el-switch
          v-model="checked"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </div>
      <div style="clear: both"></div>

      <el-input style="margin-top: 50px; margin-bottom: 50px;width: 80%"
                type="textarea"
                :rows="10"
                placeholder="文章摘要"
                v-model="abstract_text">
      </el-input>
      <div style="width: 80%;margin: auto">
        <span style="text-align: left;display: block">文章内容：</span>
        <quill-editor
          ref="myQuillEditor"
          v-model="content"
          :options="editorOption"
          style="height: 500px"
        />
      </div>
      <el-button type="primary" @click="submit" style="margin-top:150px">提交</el-button>
    </div>

    <div style="margin-top: 100px"></div>

  </div>

</template>

<script>
  import 'quill/dist/quill.core.css'  //引入富文本
  import 'quill/dist/quill.snow.css'  //引入富文本
  import 'quill/dist/quill.bubble.css'  //引入富文本
  import quillEditor from 'vue-quill-editor'  //引入富文本
 
  export default 
    components: 
      quillEditor
    ,
    name: "Write",
    data() 
      return 
        abstract_text: '',
        title: "",
        checked: false,
        is_original: this.checked ? "是" : "否",
        imageUrl: "",
        thumbnail: "",
        content: '<h2>请输入文章内容</h2>',
        //富文本编辑器配置
        editorOption: ,
        blogType : "",
        typeName: "选择文章类型",
        typeId : ""
      
    ,
    created() //编写构造函数

      this.$axios.get("http://localhost:9090/verify/")
        .then((res) => 
        ).catch(() => 
        this.$router.push(path: "/Login")
        this.$message.error("没有登录请登录后发布文章！");
      );
      //获取顶部分类信息
      this.$axios.get('http://localhost:9090/blogType/queryBlogType')
        .then(response => (
          this.blogType = response.data
        )).catch(function (error)  // 请求失败处理
        console.log(error);
      );
    ,
    methods: 
      submit() 
        this.$axios.post('http://localhost:9090/blogging/save', 
          title: this.title,
          abstract_text: this.abstract_text,
          thumbnail: this.thumbnail,
          context: this.content,
          is_original: this.checked ? "是" : "否",
          typeId : this.typeId,

        ).then((res) => 
          this.$router.push("/");
          this.$message.success("文章发布成功！");
        ).catch(() => 
          this.$message.error("文章发布失败！");
        );

      ,

      handleAvatarSuccess(res, file) 
        this.imageUrl = URL.createObjectURL(file.raw);
        this.thumbnail = "http://localhost:9090/img/" + res;
      ,
      selectType(typename,id) 
        this.typeName = typename;
        this.typeId = id;
      ,
      beforeAvatarUpload(file) 
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) 
          this.$message.error('上传头像图片只能是 JPG 格式!');
        
        if (!isLt2M) 
          this.$message.error('上传头像图片大小不能超过 2MB!');
        
        return isJPG && isLt2M;
      
    
  
</script>

<style scoped>
  .avatar-uploader .el-upload 
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  

  .avatar-uploader .el-upload:hover 
    border-color: #409EFF;
  

  .avatar-uploader-icon 
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  

  .avatar 
    width: 178px;
    height: 178px;
    display: block;
  
</style>

3、设置访问路径

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'default-passive-events'
import './http';
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */

new Vue(
  el: '#app',
  router,
  components:  App ,
  template: '<App/>'
)

4、访问

访问：http://localhost:8080/#/Write

二、实现上传图片

1、实现上传图片的接口

在BlogController当中创建对应的上传图片的接口

    @PostMapping("image")
    public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile file,HttpServletRequest request) throws IOException 
        String name = file.getOriginalFilename();
        IdWorker idWorker = new IdWorker(new Random().nextInt(10), 1);
        long l = idWorker.nextId();
        name = l+name;
        String property = System.getProperty("user.dir");
        file.transferTo(new File(System.getProperty("user.dir")+"\\\\src\\\\main\\\\webapp\\\\img\\\\"+name));
        return ResponseEntity.ok(name);

2、修改前端上传图片的路径

<el-upload
          class="avatar-uploader"
          action="http://localhost:9090/blog/image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" style="border-style: solid;border-radius: 15px"></i>
        </el-upload>

3、重新运行后端程序测试上传图片的功能

上传图片成功

4、发表文章页面的全部代码

<template>

  <div style="width: 90%; background-color: #99a9bf;margin: auto;top: 0px;left: 0px">

    <div style="width:80%;background-color: white;margin: auto;">

      <div style="clear: both"></div>
      <el-input style="margin-top: 50px;width: 80%" v-model="title" placeholder="请输入文章标题"></el-input>

      <div style="text-align: left;width: 80%;margin: auto;margin-top: 30px ">
        上传文章缩略图：
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9090/blog/image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" style="border-style: solid;border-radius: 15px"></i>
        </el-upload>
      </div>

      <div style="clear: both"></div>
      <div style="margin-top: 20px;float:left; margin-left: 130px ">
        是否原创：
        <el-switch
          v-model="checked"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </div>
      <div style="clear: both"></div>

      <el-input style="margin-top: 50px; margin-bottom: 50px;width: 80%"
                type="textarea"
                :rows="10"
                placeholder="文章摘要"
                v-model="abstract_text">
      </el-input>
      <div style="width: 80%;margin: auto">
        <span style="text-align: left;display: block">文章内容：</span>
        <quill-editor
          ref="myQuillEditor"
          v-model="content"
          :options="editorOption"
          style="height: 500px"
        />
      </div>
      <el-button type="primary" @click="submit" style="margin-top:150px">提交</el-button>
    </div>

    <div style="margin-top: 100px"></div>

  </div>

</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import quillEditor from 'vue-quill-editor'

  export default 
    components: 
      quillEditor
    ,
    name: "Write",
    data() 
      return 
        abstract_text: '',以上是关于elementUI系列一vue拖拽功能实现-vuedraggable实现多层嵌套拖拽的主要内容，如果未能解决你的问题，请参考以下文章 
 Vue+ElementUi项目实现表格-单行拖拽
 vue+elementui的el-dialog全局配置拖拽
 精通系列
 基于Vue.js 2.x系列的后台管理系统解决方案
 2021-04-25elementUI表格拖拽排序
 精通系列）