JavaScript 拖放排序后如何持久化保存排序结果
本文介绍如何在原生 JavaScript 中实现拖放排序并持久化保存排序结果。 避免直接操作 DOM 元素顺序，而是通过操作数据源来管理排序，这种方法更有效率且易于维护。
推荐方法：数据驱动排序
此方法的核心是将排序操作与数据源绑定，而不是直接操作 DOM 元素。
立即学习“Java免费学习笔记（深入）”；
-
数据源管理: 使用数组或其他数据结构作为数据源，例如
items = [{id:1, text:'Item 1'}, {id:2, text:'Item 2'}]。 拖放操作修改的是这个数组的元素顺序，而不是 DOM 元素的顺序。 -
事件监听: 监听
dragstart和dragend事件，获取拖拽元素的原始索引和目标索引。 -
数据移动: 编写一个
move(array, oldIndex, newIndex)函数，用于在数据数组中移动元素。 -
视图更新: 数据数组更新后，重新渲染视图以反映新的顺序。 这可能涉及到使用框架的
setState或类似方法。 -
持久化存储: 使用
localStorage或其他持久化机制保存更新后的数据数组。 下次加载页面时，从存储中读取数据并初始化视图。
直接操作 DOM 元素的替代方法 (不推荐):
如果必须直接操作 DOM，则需要：
-
DOM-数据绑定: 建立 DOM 元素与数据项之间的映射关系，以便在拖放后能根据 DOM 顺序重建数据。 例如，可以为每个
li.card元素添加一个data-index属性，存储其原始索引。 -
序列化 DOM: 拖放结束后，遍历
li.card元素，读取其data-index属性，重建数据数组的顺序。 -
持久化存储: 将重建的数据数组保存到
localStorage。
总而言之，数据驱动的方法更清晰、更易于维护，也更适合大型应用。 直接操作 DOM 的方法虽然可行，但容易出错且难以扩展。 强烈建议使用数据驱动的方法来处理 JavaScript 拖放排序和持久化存储。
