vue如何使用vuedraggable实现不同面板之间的拖拽排序，拖拽复制功能？【vuedraggable】

最新推荐文章于 2024-06-11 15:08:21 发布
最新推荐文章于 2024-06-11 15:08:21 发布
阅读量670 收藏 8
点赞数 6
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42711805/article/details/135974350
版权

vuedraggable官方文档链接使用说明https://www.itxst.com/vue-draggable/re7vfyfe.htmlicon-default.png?t=N7T8https://www.itxst.com/vue-draggable/re7vfyfe.html

 效果图：

 使用vuedraggable拖动左边的字段和逻辑到右边形成不同的规则校验

<!--
****--@date     2024-02-01 11:34
  ****--@author   MGD
****--@describe 新增 编辑规则
-->
<template>
  <div class="MeetingListAdd">
    <template v-if="$route.name==='meetingListTest'">
      <el-scrollbar>
        <el-container>
          <el-aside width="20%" style="overflow-y: auto;height: calc(100vh - 200px)">
            <div class="col-field-box">
              <el-divider content-position="left">
                <div class="title">字段</div>
              </el-divider>
              <draggable
                  v-model="arr1"
                  :group="dragGroup"
                  :disabled="dragBox"
                  animation="300"
                  drag-class="dragClass"
                  ghost-class="ghostClass"
                  chosen-class="chosenClass"
                  @start="onStart"
                  @end="onEnd"
              >
                <transition-group>
                  <div v-for="(item,key) in arr1" :key="key" class="draggable-item">
                    {{ item.value }}
                  </div>
                </transition-group>
              </draggable>
              <el-divider content-position="left">
                <div class="title">逻辑</div>
              </el-divider>
              <draggable
                  v-model="arr3"
                  :group="dragGroup"
                  :disabled="dragBox"
                  animation="300"
                  drag-class="dragClass"
                  ghost-class="ghostClass"
                  chosen-class="chosenClass"
                  @start="onStart"
                  @end="onEnd"
              >
                <transition-group>
                  <div v-for="(item,key) in arr3" :key="key" class="draggable-item">
                    {{ item.value }}
                  </div>
                </transition-group>
              </draggable>
              <el-divider content-position="left">
                <div class="title">扩展</div>
              </el-divider>
              <draggable
                  v-model="extendVariableArr"
                  :group="dragGroup"
                  :disabled="dragBox"
                  animation="300"
                  drag-class="dragClass"
                  ghost-class="ghostClass"
                  chosen-class="chosenClass"
                  @start="onStart"
                  @end="onEnd"
              >
                <transition-group>
                  <div v-for="(item,key) in extendVariableArr" :key="key" class="draggable-item">
                    {{ item.value }}
                  </div>
                </transition-group>
              </draggable>
              <div style="padding: 20px 0">
                <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="60px" size="mini">
                  <el-form-item label="key" prop="key">
                    <el-input v-model="ruleForm.key" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item label="value" prop="value">
                    <el-input v-model="ruleForm.value" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item>
                    <el-button size="mini" icon="el-icon-refresh-right" @click="resetForm('ruleForm')">重置</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="submitForm('ruleForm')">保存</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-aside>
          <el-container>
            <el-main width="80%">
              <div class="rule-field-box">
                <el-divider content-position="left">
                  <div class="title">规则<span>（向左边拖入对应字段进行规则添加）</span></div>
                </el-divider>
                <draggable
                    v-model="saveRuleArr"
                    group="sameDraggable"
                    animation="300"
                    drag-class="dragClass"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    :scroll="true"
                >
                  <transition-group class="transition-box">
                    <div v-for="(item, index) in saveRuleArr" :key="index" class="rule-item">
                      {{ item.value }}
                      <div class="close-box" @click="handleDel(index)">
                        <i class="el-icon-error" />
                      </div>
                    </div>
                  </transition-group>
                </draggable>
                <div v-if="!saveRuleArr.length" class="empty-box">
                  <el-empty :image-size="150" description="向左边拖入对应字段进行规则添加" />
                </div>
              </div>
            </el-main>
            <el-footer>
              <div class="button-box">
                <el-button class="resetting" type="danger" icon="el-icon-refresh-right" @click="saveRuleArr = []">重置</el-button>
                <el-button class="submit" type="primary" icon="el-icon-edit-outline" :loading="buttonLoading" :disabled="!saveRuleArr.length" @click="handleSave()">保存</el-button>
              </div>
            </el-footer>
          </el-container>
        </el-container>
      </el-scrollbar>
    </template>
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
export default {
  name: 'MeetingListAdd',
  components: { Draggable },
  mixins: [],
  data() {
    return {
      buttonLoading: false,
      dragBox: false,
      dragGroup: {
        name: 'sameDraggable',
        put: false, // true|false|array|function,//是否允许拖入当前组
        pull: 'clone'// true|false| 'clone'|array|function,//是否允许拖出当前组
      },
      ruleForm: {
        value: '',
        key: ''
      },
      rules: {
        value: [{ required: true, message: '请输入', trigger: 'blur' }],
        key: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      // 定义要被拖拽对象的数组
      arr1: [
        { key: 1, value: '字段1' },
        { key: 2, value: '字段2' },
        { key: 3, value: '字段3' },
        { key: 4, value: '字段4' },
        { key: 5, value: '字段5' }
      ],
      arr3: [
        { key: 1, value: '且' },
        { key: 2, value: '或' },
        { key: 3, value: '非' },
        { key: 4, value: '>' },
        { key: 5, value: '<' },
        { key: 6, value: '=' },
        { key: 7, value: '包含' },
        { key: 8, value: '不包含' }
      ],
      extendVariableArr: [], // 扩展变量
      saveRuleArr: [] // 规则空数组
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 开始拖拽事件
    onStart() {
      console.log('=========拖拽开始========')
      this.dragBox = true
    },
    // 拖拽结束事件
    onEnd() {
      console.log('=======拖拽结束==========')
      this.dragBox = false
    },
    // 删除
    handleDel(index) {
      this.saveRuleArr.splice(index, 1)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const submitInfo = JSON.parse(JSON.stringify(this.ruleForm))
          this.extendVariableArr.push(submitInfo)
          this.resetForm(formName)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 保存
    handleSave() {
      console.log(this.saveRuleArr, '==============================规则数据')
    }
  }
}
</script>

<style lang="scss">
.MeetingListAdd {
  height: 100%;
  padding: 20px;
  .el-scrollbar {
    height: 100%;
    width: 100%;
    overflow-x: hidden;

    .el-scrollbar__view {
      overflow-x: hidden;
    }
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  /*定义要拖拽元素的样式*/
  .ghostClass {
    display: inline-block;
    background-color: #CCE4FF !important;
  }

  .chosenClass {
    padding: 12px;
    color: #fff;
    display: inline-block;
    background-color: #7eb8ff !important;
    opacity: 1 !important;
  }

  .dragClass {
    padding: 6px 12px !important;
    display: inline-block;
    background-color: #CCE4FF !important;
    opacity: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
    border-radius: 0 !important;
  }

  .col-field-box {
    .title {
      padding: 12px 0;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
    .draggable-item {
      min-width: 60px;
      text-align: center;
      margin: 0 8px 8px;
      padding: 6px 12px;
      display: inline-block;
      border-radius: 20px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      background: linear-gradient(180deg, rgb(107, 145, 218) 0%, rgba(24, 144, 242, 1) 100%);
      box-shadow:inset 2px 0 18px  rgba(107, 145, 218, 1),inset 0 5px 10px  rgba(247, 247, 247, 1);
    }
    .draggable-item:hover {
      background-color: #fdfdfd;
      cursor: move;
    }

    .draggable-item+.draggable-item {
      border-top: none;
      margin-top: 6px;
    }
  }

  .rule-field-box {
    position: relative;
    height: calc(100vh - 300px);
    padding: 0 12px;
    border-radius: 20px;
    .title {
      padding: 12px 0;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      span {
        font-weight: normal;
        font-size: 14px;
        color: #FA8C1E;
      }
    }
    .transition-box {
      padding: 12px;
      display: block;
      height: 60vh;
      background: #2b2b2b;
      border-radius: 12px;
      overflow-y: auto;
    }
    .empty-box {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-empty__description p {
        color: #eee;
        font-size: 16px;
      }
    }
    .rule-item {
      min-width: 35px;
      text-align: center;
      position: relative;
      font-size: 16px;
      display: inline-block;
      padding: 12px 4px;
      color: #fff;
      background: #323232;
      flex-wrap: wrap;
      .close-box {
        display: none;
        position: absolute;
        top: -5px;
        right: -5px;
        cursor: pointer;
      }
    }
    .rule-item:hover .close-box {
      display: inline-block;
      z-index: 1;
    }
    .rule-item:hover {
      background-color: #6b6b6b;
      cursor: move;
    }
    .rule-item+.rule-item {
      border-top: none;
      margin-top: 6px;
    }
  }
  .button-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    .resetting,.submit {
      padding: 12px 0;
      font-size: 18px;
      width: 160px;
      border-radius: 6px;
      border: none;
      background: #2482ED;
    }
    .resetting {
      background: #fff;
      color: #2482ED;
      border: 1px solid #2482ED;
    }
  }
}
</style>

幕飒前端程序员
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuedraggable实战：结合具体应用场景实现列表内拖拽排序、列表间移动、复制，介绍、安装、使用、坑点及解决方案
学海无涯，行者无疆
12-05 5万+
从实战角度介绍如何使用Draggable实现一个配置功能，用到的关键属性和方法，需要注意的事项，坑点以及解决方案。
vue实现拖拽排序功能，单层嵌套，多层嵌套
浩星
04-10 8728
前言： 因为项目需要需要弄一个拖拽排序的效果，在这里使用的是vue的awe-dnd 实现的效果 效果图： 实行步骤： 步骤一：安装插件 cnpm install awe-dnd --save 或者npm install awe-dnd --save 步骤二：在main.js中配置 //引入拖拽排序插件 import VueDND from 'awe-dnd...
vue实现拖拽元素；vuedraggable拖拽插件
最新发布
i_am_a_div的博客
06-11 413
vue实现拖拽元素；vuedraggable拖拽插件
vue.draggable拖拽笔记
qq_40278396的博客
07-20 1007
filter:如果你想设置某个元素或对象不允许拖动拖拽把这些元素的样式名称设置到filter属性即可，本文将实现包含forbid样式的元素将无法拖动,第一行无法拖动,也无法拖动到第一行，用到filter和move属性。chosenClass：通过vue.draggable的chosenClass属性设置选中元素的样式，可以通过自定义样式来方便的区分出那个元素被选中。handle:当鼠标落在handle指定的元素上面时才允许拖动，如下面的例子只能点击加号区域才能拖动，点击其他区域则无法拖动。
Vue项目中实现拖拽排序效果-原生支持和拖拽库-draggable-demo
JackieDYH的博客
09-14 2141
draggable属性是 HTML5 新增的可拖拽属性HTML 中，除了图像、链接和选择的文本默认可拖拽外，其他元素默认是不可拖拽的。如果想让其他元素变成可拖拽的，首先需要把draggable属性设置为。
【vue3】使用vuedraggable和grid实现自定义拖拽布局
qq_45406325的博客
11-13 2549
使用vuedraggable实现拖拽功能，拖拽改变的是模块在list的顺序，使用gird设置动态类名，根据模块在list的位置匹配对应的gird样式。
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
10-15
接下来，我们要实现拖拽排序。vuedraggable 提供了 `:list` 属性，我们可以将数据源传入，当拖拽操作发生时，vuedraggable 会自动更新数据。在这个例子中，我们把 `cities` 作为 `:list` 的值。 ```html ...
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
10-16
本文将深入探讨如何使用 `vuedraggable` 的 API 选项来实现在不同盒子之间进行拖拽排序以及克隆元素。 首先，要使用 `vuedraggable`，你需要通过 npm 安装这个依赖： ```bash npm install vuedraggable --save ```...
vue拖拽排序插件vuedraggable使用方法详解
10-17
接着，我们可以在模板中使用 `<draggable>` 组件来实现拖拽排序。下面是一个基本示例： ```html {{ element.text }} ``` 这里，`v-model` 属性用于双向绑定数据，`@update` 事件监听拖拽结束时的...
vue：实现简单的拖拽功能
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
05-29 3511
简单的拖拽功能
如何在Vue中实现拖拽功能？
有我更精彩的博客
03-07 3495
Vue.js是一款流行的JavaScript框架，用于构建用户界面。其中一个常见的需求是在Vue中实现拖拽功能，让用户可以通过拖拽元素来进行交互
vue实现移动端拖动排序
10-14
主要为大家详细介绍了vue实现移动端拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现拖拽排序
hulinhulin的专栏
10-08 975
vue实现拖拽排序
vue3使用vuedraggable实现拖拽（有过渡）
stay hungry, stay foolish
03-29 4709
vue3使用vuedraggable实现拖拽
vue实现H5拖拽可视化编辑器
CodingNoob
12-27 2576
一款专注可视化呵护哈平台工具，功能强大，高可扩展的HTML5可视化编辑器，致力于提供一套简单易用、高效创新、无限可能的解决方案。技术栈采用vue和typescript开发, 专注研发创新工具。
vue-draggable的多列拖动与拷贝拖拽（不删除源数据列）
c_x_m的博客
05-06 2415
vue-draggable的多列拖动与拷贝拖拽（不删除源数据列）Demo所用属性所遇困难 Demo 官方文档 录屏软件：screenToGif (将视频转为Gif，我认为简单又好操作) 我深知，文字的感知不如图片，图片的感知不如视频，所以希望在每一次的记录中，都有种收货与喜悦，虽然以前用过这个插件，相当强大的插件，但第一次从0到1，所以记录美好时刻~ 所用属性 1.多列之间想要互相拖动 要有相同的name，如：name:'site' 2.多列直接想要拷贝，不移除 设定pull属性 ，如p
vue自定义指令实现任意标签可拖拽、改变标签宽度、动态拖拽交换位置
起风了
12-16 1650
标签拖拽、改变宽度
vue拖拽怎么实现
weixin_35755562的博客
12-21 155
Vue.js 提供了一个叫做 "v-drag" 的指令，可以用来实现拖拽功能。 示例代码如下： <template> <div v-drag="onDrag">拖拽我</div> </template> <script> export default { methods: { onDrag(event) { ...
vue 中使用vuedraggable，在两个列表之间拖动元素
reembarkation的博客
07-11 1782
vue 在两个列表之间拖动元素，使用组件vuedraggable
AntDesign vue 结合 vuedraggable 实现拖拽排序功能
05-26
Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，而 vuedraggable 是一个 Vue.js 的拖放组件。两者结合使用，可以实现拖拽排序的功能。 首先，需要在项目中安装 Ant Design Vue 和 vuedraggable： ``` npm install ant-design-vue vuedraggable --save ``` 接着，在需要使用拖拽排序功能的组件中，引入 vuedraggable 组件： ```html <template> <div> <draggable v-model="list" :options="{handle:'.drag-handle'}"> <div v-for="(item, index) in list" :key="item.id"> <span class="drag-handle">☰</span> {{ item.name }} </div> </draggable> </div> </template> <script> import draggable from 'vuedraggable'; export default { components: { draggable, }, data() { return { list: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' }, ], }; }, }; </script> ``` 在上述示例中，我们使用了 v-model 绑定了一个数组 `list`，这个数组里面包含了需要排序的元素。然后，在 `draggable` 组件中，我们使用了 `v-for` 循环渲染了每个元素，并且给每个元素添加了一个拖拽的句柄（也就是 `drag-handle` 类的元素）。 最后，我们还需要在 `options` 属性中传入一个选项对象，这个对象包含了一个 `handle` 属性，它指定了拖拽句柄的 CSS 选择器。 这样，我们就可以通过拖拽句柄来实现拖拽排序了。当用户拖动一个元素时，它会被移动到新的位置上，并且 `list` 数组中对应的元素顺序也会发生改变。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值