当前位置: 首页 > news >正文

利用sortablejs实现拖拽排序

import Sortable from "sortablejs";

created() {//禁止火狐拖拽进行搜索document.body.ondrop = function(event){event.preventDefault();event.stopPropagation();}}// 打开对话框的时候调用下openCustomDialog(){this.rowDrop()}// 行拖拽
rowDrop() {this.$nextTick(() => {this.sortable1 = Sortable.create(document.querySelector(".form_table .el-table__body-wrapper tbody"),{handle: ".drag-btn",onEnd: ({ newIndex, oldIndex }) => {this.tableData.splice(newIndex,0,this.tableData.splice(oldIndex, 1)[0]);var newArray = this.tableData.slice(0);this.tableData = [];this.$nextTick(function () {this.tableData = newArray;});},});});
},
      <el-dialogtitle="自定义":visible.sync="customDialogVisible"v-if="customDialogVisible":append-to-body="true"width="20%"><el-table:data="tableData"class="form_table"borderfithighlight-current-row><el-table-columnprop="sort"label="拖拽更换顺序"align="center"><i class=" el-icon-sort drag-btn"></i></el-table-column><el-table-columnprop="desc"label="图片类型"align="center"></el-table-column></el-table><div class="btns"><el-button @click="cancelCustomDialog">取消</el-button><el-button type="primary" @click="confirmCustomDialog" :loading="loading">确定</el-button></div></el-dialog>

<style scoped>
//悬停出现鼠标
.drag-btn{cursor: pointer;
}
</style>

注意:drag-btn 这个可以修改,但是上下要对应上

http://www.lryc.cn/news/382597.html

相关文章:

  • 超越AnimateAnyone, 华中科大中科大阿里提出Unimate,可以根据单张图片和姿势指导生成视频。
  • 【MDK5问题】:MDK5无法跳转,并且提示:no browse information available in xxxxx
  • OS中断机制-外部中断触发
  • LabVIEW如何进行电磁兼容性测试
  • Spring底层架构核心概念总结
  • hex、bin、elf、s19等文件格式介绍以及格式转换
  • oracle 窗口函数使用
  • 【Git】git常用命令
  • 【Proteus仿真】【Arduino单片机】寻迹避障蓝牙遥控小车
  • 嵌入式实验---实验八 ADC电压采集实验
  • PHP框架详解:Symfony框架的深度剖析
  • Linux `screen` 命令详解与使用指南
  • CSRF绕过
  • 如何处理Java中的BufferOverflowException异常?
  • XMLTomcatHttp协议
  • Lua优化技巧
  • 探索CSS中的cursor鼠标属性
  • 图象去噪1-使用中值滤波与均值滤波
  • 微软Edge浏览器全解析
  • Windows操作系统安装mysql数据库(zip安装包)
  • 什么是仓颉编程语言?
  • ONLYOFFICE8.1-------宝藏级别桌面编辑器测评
  • 微信小程序笔记 七!
  • GPT-5的即将登场:新一代大语言模型的无限可能
  • 微信小程序的常用事件的用法
  • 前端 CSS 经典:保持元素宽高比
  • MES工业一体机的自动化控制技术
  • 三品PDM电子行业解决方案介绍 电子企业PDM应用效果
  • 模拟面试之外卖点单系统(高频面试题目mark)
  • SwiftUI 6.0(iOS 18/macOS 15)关于颜色 Color 的新玩法