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
            <el-button
              type="primary"
              size="small"
              @click="templateStage()"
              plain
              >模版</el-button
            <el-button type="info" size="small" @click="resetStage()" plain
              >重置</el-button
        </el-form-item>
      </el-form>
      <draggable :list="listStage" class="list-group" ghost-class="ghost">
          v-for="(element, index) in listStage"
          :key="index"
          class="list-complete-item"
          <div class="list-complete-item-handle">
            {{ element.name }}
          <div style="position: absolute; right: 0px">
              style="float: right; margin-top: -25px; margin-right: 15px"
              @click="deleteEle(index)"
              <i style="color: #ff4949" class="el-icon-delete" />
            </span>
      </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>
</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>
文章到此结束，希望对你有所帮助~~有问题可以在评论区联系我
// main.js中写入：
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
// 可选择导入默认样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.compon
				
最近在学习一个可视化搭建的项目，里面用的拖拽就是draggable.js。看了几个中文的文档，有很多坑，可能是没有及时更新的原因。
建议去看vuedraggable的官方文档，只不过是英文的。官方文档：https://github.com/SortableJS/Vue.Draggable；
由于vue3已经是默认版本了，所以vuedraggable也对应vue2.0和3.0有各自的版本，直接使用基本命令安装：
npm install vuedraggable --save
会默认安装2.1左右的
				
Vue.js是一个流行的JavaScript框架，用于构建用户界面。vuedraggable是一个基于Vue.js的插件，用于实现可拖动和排序的功能。
要在Vue 2中使用vuedraggable，你需要按照以下步骤进行操作：
1. 首先，安装vuedraggable插件。可以通过npm或者yarn进行安装：
npm install vuedraggable
2. 导入vuedraggable插件并在你的Vue组件中注册：
```javascript
import draggable from 'vuedraggable';
export default {
  components: {
    draggable
  // 其他组件选项
3. 在你的Vue模板中使用vuedraggable指令来创建可拖动的元素：
```html
<draggable v-model="list">
  <div v-for="item in list" :key="item.id">{{ item.text }}</div>
</draggable>
在上面的例子中，`v-model`绑定了一个数组`list`，这个数组中的元素会被渲染成可拖动的元素。
4. 在你的Vue组件中定义`list`数组，并初始化它：
```javascript
export default {
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
  // 其他组件选项
这样，你就可以在Vue 2中使用vuedraggable插件实现可拖动和排序的功能了。你可以根据需要对元素进行排序，并在`list`数组中更新元素的顺序。
希望这个回答对你有所帮助！如果你还有其他问题，请随时提问。