el-transfer 穿梭框右侧实现拖拽排序功能

最新推荐文章于 2025-06-06 08:35:51 发布

原创

最新推荐文章于 2025-06-06 08:35:51 发布 · 507 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

该文章已生成可运行项目，

通过 sortablejs 工具库，自定义指令来实现拖拽。

npm i sortablejs

directives/draggableTransfer.ts

import Sortable from 'sortablejs'
export function draggableTransfer(app: any) {
   
   
  app.directive('draggable-transfer', (el, binding) => {
   
   
    const {
   
    value } = binding
    const transferDoms = el.querySelectorAll('.el-transfer-panel__list')
    transferDoms &&
      transferDoms.length > 1 &&
      Sortable.create(transferDoms[1], {
   
   
        handle: '.btn-action', // 触发拖动事件的元素，
        draggable: '.el-transfer-panel__item', // 拖动触发时，可拖动的区域
        animation: 150,
        sort: true,
        disabled: false,
        onEnd(event: any) {
   
   
          // 这里可以根据需要更新数据源，例如调用binding.value回调函数传递拖动信息
          binding.value?.onDragenChange