首页 > 其他分享 >vue拖拽组件的使用(vuedraggable)

vue拖拽组件的使用(vuedraggable)

时间:2023-08-22 13:57:20浏览次数:36  
标签:disableDrag vue name 元素 draggable vuedraggable 拖拽

vuedraggable官方文档链接https://www.itxst.com/vue-draggable/tutorial.html
按装

npm i -S vuedraggable

页面引入

import draggable from "vuedraggable"

注册组件

  components: {
     draggable
  },

使用

<template>
  <div>
    <el-popover placement="bottom" width="200" trigger="click">
      <vuedraggable v-model="tablecolumns" :options="dragOptions">
        <transition-group>
          <div
            v-for="(item, index) in tablecolumns"
            :key="index"
            :draggable="!item.status"
            :class="{ draggable: !item.status }"
            style="display: flex; justify-content: space-between"
          >
            <el-checkbox
              v-model="item.isShow"
              :disabled="item.status"
              @change="(checked) => itemchange(checked, index)"
              >{{ item.label }}</el-checkbox
            >
            <div
              style="display: inline-block; font-size: 14px; margin-right: 10px"
            >
              <div
                :class="item.status ? '' : 'textBlue'"
                @click="item.status = !item.status"
              >
                {{ item.status ? "解冻" : "冻结" }}
              </div>
            </div>
          </div>
        </transition-group>
      </vuedraggable>
      <el-button slot="reference" style="margin-left: 30%">设置表头</el-button>
    </el-popover>
    <el-table
      ref="mytable"
      border
      :data="tableData"
      class="customer-no-border-table"
      :header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
      style="width: 40%; border-top: 1px solid #409eff; margin: auto"
    >
      <el-table-column
        type="index"
        label="序号"
        fixed
        align="center"
      ></el-table-column>
      <template v-for="(item, index) in tablecolumns">
        <el-table-column
          v-if="item.isShow"
          :key="index"
          :prop="item.prop"
          :formatter="item.formatter"
          :label="item.label"
          :fixed="item.status"
          width="300"
          :min-width="item.minWidth"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originColumns: [
        { label: "订单号", prop: "billCode", status: false, isShow: true },
        { label: "电站名称", prop: "buildName", status: false, isShow: true },
        { label: "公司名称", prop: "companyName", status: false, isShow: true },
      ],
      tablecolumns: [],
      dragOptions: {
        group: "items",
        // 在拖拽过程中检查每个元素的 draggable 属性
        draggable: ".draggable",
      },
      tableData: [
        { billCode: "111", buildName: "宝隆电站", companyName: "A公司" },
        { billCode: "222", buildName: "双井电站", companyName: "B公司" },
        { billCode: "333", buildName: "国贸电站", companyName: "C公司" },
      ],
    };
  },
  created() {
    this.tablecolumns = this.originColumns;
  },
  methods: {
    // 勾选
    itemchange(value, index) {
      console.log(value, index);
      this.tablecolumns[index].isShow = value;
    },
  },
};
</script>

<style lang="less" scoped>
.textBlue {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  border: none;
}
</style>

vuedraggable 中,要禁止某个元素拖拽,你可以使用 vuedraggable 提供的 draggablegroup 属性结合的方式实现。下面是具体的步骤:

  1. 在你的 Vue 组件中引入 vuedraggable
import draggable from 'vuedraggable';
  1. 在你的组件模板中,使用 draggable 组件,并为每个元素绑定 draggable 属性:
<draggable v-model="list" :options="dragOptions">
  <div v-for="(item, index) in list" :key="item.id" :draggable="!item.disableDrag">
    {{ item.name }}
  </div>
</draggable>

在上述代码中,list 是你的数据列表,其中每个元素需要包含一个名为 disableDrag 的布尔类型属性来控制元素是否可拖拽。

  1. 在你的 Vue 组件中,定义 dragOptions
data() {
  return {
    list: [
      { id: 1, name: 'Item 1', disableDrag: false },
      { id: 2, name: 'Item 2', disableDrag: false },
      { id: 3, name: 'Item 3', disableDrag: true },
      { id: 4, name: 'Item 4', disableDrag: false },
    ],
    dragOptions: {
      group: 'items',
      // 在拖拽过程中检查每个元素的 draggable 属性
      draggable: '.draggable',
    },
  };
},

在上述代码中,dragOptionsdraggable 属性设置为 .draggable,这将检查每个元素是否具有 draggable 类,如果没有该类,则元素将被禁止拖拽。

  1. 最后,为那些你想禁止拖拽的元素添加 draggable 类:
<div v-for="(item, index) in list" :key="item.id" :draggable="!item.disableDrag" :class="{ 'draggable': !item.disableDrag }">
  {{ item.name }}
</div>

通过上述步骤,你可以在 vuedraggable 中控制特定元素是否可拖拽。如果列表中的元素的 disableDrag 属性为 true,则该元素将不可拖拽,否则该元素可以拖拽。

标签:disableDrag,vue,name,元素,draggable,vuedraggable,拖拽
From: https://www.cnblogs.com/hxy--Tina/p/17648320.html

相关文章

  • vue3父子组件通信小结
    父子组件中的attrsprops理解/继承首先,父组件可以给子组件传入属性、监听函数(类似onClick),class,style,id,总结起来就是大三类-属性,监听函数,样式!爷爷组件--有两个监听函数import{computed,defineComponent,reactive,ref}from"vue";import{css}from"@emotion/css"......
  • 中小学教育综合管理平台源码,vue2+Java+springboot框架开发
    智慧校园电子班牌软件是出于校园考勤管理以及班级校园信息展示为目的的显示系统软件,电子班牌系统主要用于中小学教育的综合管理平台,融合了多媒体技术、语音技术、人脸识别、信息发布、后台管理等多种技术。智慧班牌通过以云平台为基础,结合互联网、物联网系统进行校园管理,实现学校数......
  • vue-element-admin项目中tagView嵌入iframe不刷新重载
    vue-element-admin项目中tagView嵌入iframe不刷新重载最近使用vue-element-admin来开发项目,因为以前老项目太大,暂不重构,如要通过iframe嵌套在新项目中,通过router来重写url加载,但是业务需要切换菜单或者tagView不能刷新重载iframe页面,因此需要改造一、vue-element-admin是通过......
  • vue实现‘换一批’功能
    实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组<divclass="flex-align"@click="change"><span>换一批</span></div>data(){return{qList:[],//处理后的list......
  • 使用Vue.js构建交互式的前端应用
    引言Vue.js是一种流行的JavaScript框架,用于构建交互式的前端应用程序。它具有简单易用的API和灵活的组件化架构,使开发人员能够快速构建高效的用户界面。什么是Vue.js?Vue.js是一种用于构建用户界面的开源JavaScript框架。它采用了MVVM(Model-View-ViewModel)架构模式,通过数据绑定和......
  • VUE3单页面应用开发常用工具
    Vite一种新型的前端构建工具,它主要由两个部分做成一个开发服务器,它基于 原生ES模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。社区模......
  • vue_中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件
    今天写的一个搜索框,要求输入字符时不作处理,直到用户点击搜索按钮时才执行搜索逻辑;当用户将搜索框文本删除至空字符串时,执行一次无搜索值的搜索逻辑,用于将表格数据恢复至无筛选;在这个功能上我想当然地使用了input事件用于触发输入事件,但是被测试出bug:当输入法是......
  • VUE element-ui之table表格全局排序
    一调用后端接口排序功能步骤:标签中定义排序方法:<el-tableref="reset"v-loading="loading":data="tableData"height="520"border@sort-change="sortChange">要排序的字段......
  • vue实现简单表单收集
    vue实现简单表单收集实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><scriptsrc="......
  • vue3 watch 监听响应式数据变化 改变img的src
    目标:用一个图片来监视全局websocket对象的连接状态  全局websocket的写法详见:https://www.cnblogs.com/hailexuexi/p/17577818.htmlmain.js全局对象 websocket的连接状态//全局对象constglobalData=reactive({ websockStatus:"open",})app.provide('globalData',......