vue 实现table上下拖拽行功能

在项目中要实现表格可以上下拖拽行,这样一个功能

下面是实现的代码

html 复制代码
<div class="tablebox">
          <div class="head">
            <div class="borderright" style="width: 30%">显示</div>
            <div class="borderright" style="width: 60%">列名</div>
            <div class="borderright" style="width: 30%">拖动调整顺序</div>
          </div>
          <div
            v-for="(item, index) in items"
            :key="item.id"
            draggable="true"
            @dragstart="dragStart(index)"
            @dragover.prevent
            @drop="drop(index)"
            class="line"
          >
            <div class="borderright" style="width: 30%">
              <el-checkbox />
            </div>
            <div class="borderright" style="width: 60%">{{ item.name }}</div>
            <div class="borderright" style="width: 30%">
              <el-button type="" icon="Operation" link></el-button>
            </div>
          </div>
        </div>

//---------------js代码------------------------------

html 复制代码
const items = ref([
  { id: 1, name: 'Item 1', value: 'Value 1' },
  { id: 2, name: 'Item 2', value: 'Value 2' },
  { id: 3, name: 'Item 3', value: 'Value 3' },
])

let dragIndex = null

const dragStart = (index) => {
  dragIndex = index
}

const drop = (newIndex) => {
  if (dragIndex !== newIndex) {
    const toBeMoved = items.value[dragIndex]
    items.value.splice(dragIndex, 1)
    items.value.splice(newIndex, 0, toBeMoved)
    dragIndex = null
  }
}

//------------------css样式-----------------------------

html 复制代码
.tablebox {
  border-top: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
  .head {
    display: flex;
    background: #f5f5f5;
    .borderright {
      border-right: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      text-align: center;
      font-size: 13px;
      color: #333333;
      font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
      font-weight: 700;
      line-height: 40px;
    }
  }
  .line {
    display: flex;
    line-height: 40px;
    .borderright {
      border-right: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      text-align: center;
    }
  }
}

希望可以帮到你~

看到这如果对你有用的话不如留下你的足迹

加个关注

不迷路~~~~

相关推荐
之梦2 分钟前
Electron + Vue3开源跨平台壁纸工具实战(八)主进程-核心功能
前端·electron
白仑色2 分钟前
JavaScript案例(乘法答题游戏)
开发语言·javascript·游戏
我叫黑大帅4 分钟前
从刷不到底的朋友圈说起:手把手教你搞懂 "下拉加载更多"
前端·javascript
前端服务区5 分钟前
Map与WeakMap
前端·javascript
用户3802258598246 分钟前
vue3源码解析:编译之编译器代码生成过程
前端·vue.js·源码阅读
Mintopia7 分钟前
🤖 接入 AI 服务之「OpenAI 篇」——一场与神经网络谈心的仪式
前端·javascript·aigc
晴殇i9 分钟前
前端视角下的单点登录(SSO)从原理到实战
前端·面试·trae
圆心角11 分钟前
深入解析协商缓存(弱缓存)
前端·浏览器
用户151865304138415 分钟前
从传统办公软件到云协作Flash Table AI分钟级生成表单,打造企业远程高效率办公的利器
前端·后端·前端框架
鹏北海21 分钟前
vue-route-query-hook:一个用于 Vue 3 的 Composable,提供响应式参数与 URL 查询参数之间的双向同步功能
前端·javascript·vue.js