文章目录

前言一、基础了解1、Vue 32、TypeScript3、Element Plus4、SortableJs 二、SortableJs的安装1、SortableJs安装2、SortableJs类型安装 三、代码封装1、自定义指令 draggable2、自定义指令 draggable 值类型定义3、自定义指令入口定义4、使用 四、示例五、结语

---

前言

徐小宝：本文仅以经验指南，实现拖拉拽效果，涉及TypeScript、Elment Plus、SortableJs 等，以表格为例讲演。

一、基础了解

主要了解本文涉及的框架、语言、工具等，了解其基本内容。

1、Vue 3

Vue 3官网传送门Vue 2官网传送门

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。Vue 3是Vue 2的重构版本，引入了诸如组合式API、多根节点、Teleport等新特性。Vue 2 将于 年 12 月 31 日停止维护。

2、TypeScript

TypeScript官网传送门

TypeScript 是 JavaScript 的一个超集，具有强类型，静态代码检测等特性可以编译成 JavaScript 以运行在任意浏览器之中。TypeScript 是一种基于 JavaScript 构建的强类型编程语言，可为您提供任何规模的更好工具。

3、Element Plus

Element Plus官网传送门

一款基于 Vue 3，面向设计师和开发者的组件库由于 Vue 3 的原因，不再支持IE11浏览器

4、SortableJs

SortableJs官网传送门

一款功能强大的JavaScript 拖拽库基于原生HTML5中的拖放APIAPI使用简单，兼容性强不依赖Jquery等其他框架支持多种框架（angular、vue、react等）

二、SortableJs的安装

1、SortableJs安装

npm i sortablejspnpm add sortablejsyarn add sortablejs

2、SortableJs类型安装

为了在TypeScript下有代码提示，且不会找不到模块

npm i @types/sortablejs -Dpnpm add @types/sortablejs -Dyarn add @types/sortablejs -D

三、代码封装

1、自定义指令 draggable

// FilePath: src/directives/draggable/index.tsimport type {DraggableOption } from '@/directives/draggable/types';import Sortable from 'sortablejs';import type {Directive, DirectiveBinding } from 'vue';const draggable: Directive = {mounted(el: HTMLElement, binding: DirectiveBinding) {const options: DraggableOption[] = binding.value;options.forEach(item => {new Sortable(el.querySelector(item.selector) as HTMLElement, item.options);});}};export default draggable;

2、自定义指令 draggable 值类型定义

// FilePath: src/directives/draggable/types.tsimport type Sortable from 'sortablejs';export interface DraggableOption {selector: string;options: Sortable.Options;}

3、自定义指令入口定义

// FilePath: src/directives/index.tsimport type {App } from 'vue';import draggable from './draggable';const directives = {draggable};const install = (app: App) => {Object.keys(directives).forEach(key => {app.directive(key, directives[key as keyof typeof directives]);});};export default {install};

4、使用

全局注册自定义指令draggable

// FilePath: main.tsimport Directives from '@/directive';import {createApp } from 'vue';import App from './App.vue';app.use(Directives);

局部引入自定义指令draggable

在< script setup>中注册

import vDraggable from '@/directives/draggable';

非< script setup>中注册

import draggable from '@/directives/draggable';export default {setup(){/*...*/},directives: {draggable}}

四、示例

<template><el-table :data="data" v-draggable="draggableOptions"><el-table-column type="index" label="序号" align="center" width="50" /><el-table-column prop="name" label="姓名" align="center" /></el-table></template><script setup lang="ts">import type {SortableEvent } from 'sortablejs';import {nextTick, onBeforeMount, ref } from 'vue';interface DemoData {name: string;age: number;}ononBeforeMount(() => {getData(10);});const demoData = ref<DemoData[]>([]);const getData = (length: number) => {demoData.value = Array.from({length }).map((_, index) => ({name: `张三-${index}`age: index * 2}))};const draggableOptions = [{selector: 'tbody',options: {animation: 150,onEnd: (evt: SortableEvent) => {const {newIndex, oldIndex } = evt;const arr: DemoData[] = [...demoData.value];// 拖动元素与新位置原元素互换位置// ES6 解构写法// [arr[newIndex as number],arr[oldIndex as number]] = [arr[oldIndex as number],arr[newIndex as number]]// ES5 普通写法// arr.splice(newIndex as number,1, ...arr.splice(oldIndex as number,1,arr[newIndex as number]))// 拖动元素至新位置后其余依次下移const [moveRowData] = [...arr.splice(oldIndex as number, 1)];arr.splice(newIndex as number, 0, moveRowData);demoData.value = [];nextTick(() => {demoData.value = [...arr];});}}}];</script>

五、结语

本文仅以Vue 3+TypeScript+Elment Plus+SortableJs 环境下，使用Vue自定义指令实现表格拖拽效果，其他框架及元素(HTMLElment) 可自行理解后实现，验证后欢迎私聊扩充示例代码。

如有问题或不到之处，欢迎评论留言。