vue2使用vuedraggable实现拖拽删除添加重置功能

需求：要输入xx阶段，之后输入后显示但是要可以自己手动排序和删除，以免写错了，并且做了判断，如果重复输入的话会提示，不会让他添加，点击重置功能后一键清空所有输入

---

1.效果

2.下载插件

我直接下的最新版

npm install vuedraggable

3.页面导入注册

导入
import Draggable from "vuedraggable";
注册
  components: {
    Draggable
  },

4.讲解部分代码（完整代码最下面）

4.1添加内容

some方法：相当于||运算符，只要在数组中有一个是符合判断条件的那么返回的就为ture

    addStage() {
      if (this.formLabelAlign.stage) {
        // 使用some方法遍历数组，如果存在相同值则返回true，否则返回false
        const isDuplicate = this.listStage.some((item) => {
          return item.name === this.formLabelAlign.stage;
        });
        if (isDuplicate) {
          // 如果存在相同值，则提示错误并返回false
          this.$message.error("输入重复，请重新输入！");
          return false;
        } else {
          // 否则，将新元素添加到数组中
          this.listStage.push({ name: this.formLabelAlign.stage});
        }
      } else {
        this.$message.error("施工阶段不允许为空!!");
      }
    },

4.2单个删除

这边比对的是index索引值，只要索引值相同那么就查到元素在数组中的索引值，之后再删除

indexOf:方法返回的是要查找的元素在数组中的索引位置，如果没找到则返回-1。

splice:方法，第一个是要删除的索引位置，第二个是从该位置删几个元素

 deleteEle(ind) {
      this.listStage.forEach((item,index) => {
        if(ind === index){
          const index = this.listStage.indexOf(item);
          this.listStage.splice(index, 1);
        }
      });
    },

 4.3样式

这几个都是插件自带的样式，可以自行更改

    .list-complete-item.sortable-chosen {
      background: #4ab7bd;
    }
 
    .list-complete-item.sortable-ghost {
      background: #30b08f;
    }
 
    .list-complete-enter,
    .list-complete-leave-active {
      opacity: 0;
    }

5.完整代码

样式和我录的会有差别哈，这是我特地剪切出来的，不是原版，操作是没问题的，样式需要自行更改。

<template>
    <div class="content-box">
        <div class="container">
    <el-button @click="openDialog()">打开弹窗el-button>
    <el-dialog
      title="添加类型"
      :visible.sync="addProjectTypeDiglog"
      width="30%"
    >
      <el-form label-position="left" label-width="80px" :model="formLabelAlign">
        <el-form-item label="类型">
          <el-input v-model="formLabelAlign.name">el-input>
        el-form-item>
        <el-form-item label="阶段">
          <div class="from_item">
            <el-input
              v-model="formLabelAlign.stage"
              placeholder="请输入阶段"
            >el-input>
            <el-button type="success" @click="addStage()" size="small" plain
              >添加
            >
            <el-button
              type="primary"
              size="small"
              @click="templateStage()"
              plain
              >模版
            >
            <el-button type="info" size="small" @click="resetStage()" plain
              >重置
            >
          div>
        el-form-item>
      el-form>
      <draggable :list="listStage" class="list-group" ghost-class="ghost">
        <div
          v-for="(element, index) in listStage"
          :key="index"
          class="list-complete-item"
        >
          <div class="list-complete-item-handle">
            {{ element.name }}
          div>
          <div style="position: absolute; right: 0px">
            <span
              style="float: right; margin-top: -25px; margin-right: 15px"
              @click="deleteEle(index)"
            >
              <i style="color: #ff4949" class="el-icon-delete" />
            span>
          div>
        div>
      draggable>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addProjectTypeDiglog = false">取 消el-button>
        <el-button type="primary" @click="sureStage()">确 定el-button>
      span>
    el-dialog>
  div>
  div>
template>
 
<script>
import Draggable from "vuedraggable";
export default {
  components: {
    Draggable
  },
  data() {
    return {
      addProjectTypeDiglog: false,//添加工程类型的弹窗
      templateDialog:false,//模版弹窗
      formLabelAlign: {
        name: "",
        stage: "",
        type: "",
      },
      listStage: [{ name: "John",id:0 }, { name: "Joao",id:1 }, { name: "Jean",id:2 }],
      index:2
    };
  },
  mounted() {
 
  },
  methods: {
    openDialog(){
      this.addProjectTypeDiglog=true;
    },
    addStage() {
      if (this.formLabelAlign.stage) {
        // 使用some方法遍历数组，如果存在相同值则返回true，否则返回false
        const isDuplicate = this.listStage.some((item) => {
          return item.name === this.formLabelAlign.stage;
        });
        if (isDuplicate) {
          // 如果存在相同值，则提示错误并返回false
          this.$message.error("输入重复，请重新输入！");
          return false;
        } else {
          // 否则，将新元素添加到数组中
          this.listStage.push({ name: this.formLabelAlign.stage});
        }
      } else {
        this.$message.error("施工阶段不允许为空!!");
      }
    },
    deleteEle(ind) {
      this.listStage.forEach((item,index) => {
        if(ind === index){
          const index = this.listStage.indexOf(item);
          this.listStage.splice(index, 1);
        }
      });
    },
    resetStage() {
      this.listStage = [];
    },
  }
};
script>
 
<style lang="scss" scoped>
  // 拖拽的样式设置
  .list-group {
    .list-complete-item {
      // width: 80%;
      cursor: pointer;
      position: relative;
      font-size: 16px;
      padding: 10px 12px;
      margin: 0 0 4px 80px;
      border: 1px solid #bfcbd9;
      transition: all 1s;
    }
 
    .list-complete-item-handle {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 50px;
    }
    .list-complete-item.sortable-chosen {
      background: #4ab7bd;
    }
 
    .list-complete-item.sortable-ghost {
      background: #30b08f;
    }
 
    .list-complete-enter,
    .list-complete-leave-active {
      opacity: 0;
    }
  }
style>

文章到此结束，希望对你有所帮助~~有问题可以在评论区联系我