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

elementui拖拽

2026-03-06 01:49:00前端教程

使用 Element UI 实现拖拽功能

Element UI 本身不直接提供拖拽组件，但可以通过集成第三方库（如 vuedraggable）或 HTML5 原生拖拽 API 实现。以下是两种常见方法：

方法一：使用 `vuedraggable` 实现列表拖拽

vuedraggable 是基于 Sortable.js 的 Vue 拖拽库，适合实现列表项的拖拽排序。

安装依赖 确保项目中已安装 vuedraggable：
```
npm install vuedraggable
```

基础示例代码

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

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽后的顺序:', this.list);
    },
  },
};
</script>

<style>
.draggable-item {
  padding: 12px;
  margin: 8px 0;
  background: #f5f7fa;
  border: 1px dashed #dcdfe6;
  cursor: move;
}
</style>

关键配置
- v-model：绑定拖拽的数据数组。
- @end：拖拽结束事件回调。
- 可通过 group 属性实现跨列表拖拽。

方法二：HTML5 原生拖拽 API

适用于自定义拖拽逻辑，如拖拽上传或非列表场景。

示例：拖拽上传文件

<template>
  <el-upload
    action="https://example.com/upload"
    drag
    multiple
    :auto-upload="false"
    @change="handleFileChange"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处或<em>点击上传</em></div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleFileChange(file, fileList) {
      console.log('已选择文件:', file);
    },
  },
};
</script>