Vue 3+TypeScript+Elment Plus+SortableJs 自定义指令实现拖拽效果

<template>
  <div v-draggable="dragOptions">可拖拽的元素</div>
</template>
 
<script lang="ts">
import { DirectiveBinding } from 'vue';
import Sortable from 'sortablejs';
 
export default {
  name: 'DraggableDirective',
  directives: {
    draggable: {
      beforeMount(el: HTMLElement, binding: DirectiveBinding) {
        const options = binding.value || {};
        const sortable = Sortable.create(el, options);
        el['__sortable__'] = sortable; // 将Sortable实例附加到元素
      },
      unmounted(el: HTMLElement) {
        const sortable = el['__sortable__'];
        if (sortable) {
          sortable.destroy();
        }
      }
    }
  }
};
</script>

这个代码实例展示了如何在Vue 3+TypeScript+Elment Plus环境中创建一个自定义拖拽指令。它定义了一个名为draggable的指令，在元素挂载前创建一个Sortable实例，并在元素卸载时销毁该实例。这个指令可以用来创建可拖拽的列表或其他界面元素。