活字格标签页增加拖拽排序功能（SortableJS）

作者: luohao 更新: 2023-01-02 分类: 活字格,方法,JS

概述

使用 SortableJS 库为活字格的标签页（Tab）增加拖拽移动排序功能，让用户可以自由调整标签页顺序，提升交互体验。

第一步：引入 SortableJS

在活字格工程中添加 JavaScript 引用：

https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js

第二步：初始化拖拽排序

在页面加载时的 JS 命令中执行：

var container = document.querySelector(".FTM-nav-wrap-placeholder .FTM-nav-wrap-list");
var options = {
    animation: 100,                           // 动画时长(ms)
    draggable: ".FTM-nav-wrap-list-item",     // 可拖拽元素选择器
    dataIdAttr: "title",                      // 数据标识属性
    onEnd: function(evt) {
        // 拖拽结束后的回调
        console.log("从", evt.oldIndex, "移到", evt.newIndex);
        // 可在此保存新的排序到数据库
    }
};
Sortable.create(container, options);

参数说明

参数说明
animation拖拽动画时长，数值越大动画越慢
draggable指定哪些子元素可以拖拽，CSS 选择器
dataIdAttr拖拽后用于识别元素的数据属性
onEnd拖拽结束回调，可获取新旧位置索引
handle拖拽手柄选择器（如只允许拖拽标题栏）
ghostClass拖拽时幽灵元素的 CSS 类名

保存排序结果

onEnd: function(evt) {
    var items = evt.target.querySelectorAll(".FTM-nav-wrap-list-item");
    var order = [];
    items.forEach(function(item) {
        order.push(item.getAttribute("title"));
    });
    // 调用服务端命令保存排序
    Forguncy.ServerCommand("保存标签顺序", { order: JSON.stringify(order) });
}

效果

配置完成后，用户可通过鼠标拖拽标签页调整顺序，界面流畅自然。

标签：