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

elementUI拖曳

2026-01-14 21:29:43前端教程

elementUI拖曳功能实现

elementUI本身不提供原生拖拽组件，但可以通过结合HTML5原生API或第三方库实现拖拽功能。以下是几种常见实现方式：

使用HTML5原生拖拽API

HTML5提供了draggable属性和相关事件，适用于简单场景：

<template>
  <div 
    draggable="true" 
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    可拖拽元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', '拖拽数据');
    },
    handleDragEnd() {
      console.log('拖拽结束');
    }
  }
}
</script>

使用Sortable.js实现列表排序

Sortable.js是常用的拖拽排序库，与elementUI表格或列表结合：

import Sortable from 'sortablejs';

export default {
  mounted() {
    const el = document.getElementById('draggable-list');
    new Sortable(el, {
      animation: 150,
      onEnd: (evt) => {
        console.log('新位置:', evt.newIndex);
      }
    });
  }
}

elementUI表格拖拽行

实现elementUI表格行拖拽需要结合自定义指令：

// 全局注册指令
Vue.directive('drag-table', {
  inserted(el, binding) {
    const table = el.querySelector('.el-table__body-wrapper tbody');
    new Sortable(table, {
      handle: '.drag-handle',
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        const arr = binding.value.slice();
        arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0]);
        binding.value = arr;
      }
    });
  }
});

使用Vue.Draggable组件

Vue.Draggable是封装好的Vue拖拽组件，与elementUI兼容性良好：

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

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      list: [{id: 1, name: 'Item 1'}, ...]
    }
  },
  methods: {
    onDragEnd() {
      // 处理拖拽后逻辑
    }
  }
}
</script>

自定义拖拽指令

创建可复用的自定义指令实现拖拽功能：

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', true);
    el.style.cursor = 'move';

    el.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('payload', binding.value);
    });
  }
});

注意事项

移动端需额外处理touch事件
复杂场景建议使用第三方库如interact.js
拖拽过程可能需要禁用部分浏览器默认行为
性能敏感场景注意减少DOM操作

以上方法可根据具体需求选择或组合使用，elementUI项目通常推荐Vue.Draggable方案。

elementUI拖曳

标签: elementUI

分享给朋友：

react elementUI

React 和 Element UI 是两个不同的技术栈，但可以通过整合实现类似功能。以下是相关解决方案和替代方案： React 与 Element UI 的替代方案 Element UI 是为 V…

elementUI浮动

elementUI浮动实现方法在Element UI中实现浮动效果通常可以通过CSS的float属性或Flex布局来实现。以下是几种常见的实现方式：使用CSS float属性通过为Eleme…

elementUI拖曳