探索 Sortable.js 的魅力：赋能 El-Table 表格拖拽功能

前端

2023-11-15 00:15:24

如今，随着技术的发展，人们对交互性更强的用户体验提出了更高的要求。在此背景下，Sortable.js 应运而生，它是一款轻量级的 JavaScript 拖拽库，凭借其卓越的性能和出色的移动端支持，迅速成为开发人员构建交互式界面的首选工具。

在本文中，我们将深入探讨 Sortable.js 的强大功能，并以两个案例演示如何在 El-Table 表格中轻松实现拖拽效果。

Sortable.js 简介

Sortable.js 是一款开源且免费的 JavaScript 拖拽库，它轻量、高效且易于使用。它提供了丰富的 API，允许开发人员轻松自定义拖拽行为，满足各种交互需求。

案例一：简单拖拽

效果图：

[效果图展示拖拽移动行]

代码：

import Sortable from "sortablejs";

const elTable = document.getElementById("el-table");
Sortable.create(elTable, {
  // 允许拖拽
  draggable: "tr",
  // 实时更新数据
  onUpdate: function (evt) {
    // 获取当前拖拽行的索引
    const oldIndex = evt.oldIndex;
    // 获取拖拽后的索引
    const newIndex = evt.newIndex;
    // 更新数据顺序
    // ...
  },
});

案例二：限制拖拽方向

效果图：

[效果图展示纵向拖拽移动行]

代码：

const elTable = document.getElementById("el-table");
Sortable.create(elTable, {
  // 允许拖拽
  draggable: "tr",
  // 限制纵向拖拽
  direction: "vertical",
  // 实时更新数据
  onUpdate: function (evt) {
    // 获取当前拖拽行的索引
    const oldIndex = evt.oldIndex;
    // 获取拖拽后的索引
    const newIndex = evt.newIndex;
    // 更新数据顺序
    // ...
  },
});