当前位置：首页 > 前端教程

elementUI拖动

2026-03-06 01:52:10前端教程

elementUI 实现拖拽功能的方法

ElementUI 提供了 el-draggable 组件来实现拖拽功能，该组件基于 Sortable.js 封装。以下是具体实现方式：

安装依赖

确保项目中已安装 vuedraggable 和 element-ui：

npm install vuedraggable element-ui --save

基础拖拽列表

在 Vue 组件中引入并使用 el-draggable：

<template>
  <el-draggable v-model="list" @end="handleEnd">
    <div v-for="item in list" :key="item.id">{{ item.name }}</div>
  </el-draggable>
</template>

<script>
import { ElDraggable } from 'element-ui'
export default {
  components: { ElDraggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    handleEnd() {
      console.log('拖拽结束后的顺序:', this.list)
    }
  }
}
</script>

表格行拖拽

实现表格行的拖拽排序：

<template>
  <el-table :data="tableData" row-key="id">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-draggable 
          v-model="tableData" 
          :options="{ handle: '.drag-handle' }"
        >
          <i class="drag-handle el-icon-rank"></i>
        </el-draggable>
      </template>
    </el-table-column>
  </el-table>
</template>

跨容器拖拽

实现不同容器间的元素拖拽交换：

<template>
  <div class="container">
    <el-draggable 
      v-model="listA" 
      group="items" 
      @change="logChange"
    >
      <div v-for="item in listA" :key="item.id">{{ item.name }}</div>
    </el-draggable>

    <el-draggable 
      v-model="listB" 
      group="items"
      @change="logChange"
    >
      <div v-for="item in listB" :key="item.id">{{ item.name }}</div>
    </el-draggable>
  </div>
</template>

拖拽回调事件

常用事件处理：

methods: {
  // 拖拽开始
  onStart(evt) {
    console.log('开始拖拽:', evt.item)
  },

  // 拖拽结束
  onEnd(evt) {
    console.log('结束拖拽:', evt.newIndex)
  },

  // 顺序变化
  onUpdate(evt) {
    console.log('新顺序:', this.list)
  }
}

样式优化

为拖拽元素添加视觉反馈：

.el-draggable {
  cursor: move;
  user-select: none;
}

.drag-handle {
  cursor: move;
  color: #409EFF;
}

/* 拖拽时的占位符样式 */
.sortable-chosen {
  background: #f5f7fa;
}

/* 拖拽时的克隆元素样式 */
.sortable-ghost {
  opacity: 0.5;
}