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;
    }
  }
}

希望可以帮到你~

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

加个关注

不迷路~~~~

相关推荐
m0_738120723 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
Liu.7745 小时前
uniappx鸿蒙适配
前端
叫我阿柒啊6 小时前
Java全栈开发面试实战:从基础到微服务架构
java·vue.js·spring boot·redis·git·full stack·interview
山有木兮木有枝_6 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
ZXT6 小时前
js基础重点复习
javascript
言兴6 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra7 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋8 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴8 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农9 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js