JavaScript拖放排序后如何保存位置？

JavaScript 拖放排序后如何持久化保存排序结果

本文介绍如何在原生 JavaScript 中实现拖放排序并持久化保存排序结果。 避免直接操作 DOM 元素顺序，而是通过操作数据源来管理排序，这种方法更有效率且易于维护。

推荐方法：数据驱动排序

此方法的核心是将排序操作与数据源绑定，而不是直接操作 DOM 元素。

立即学习“Java免费学习笔记（深入）”；

1. 数据源管理: 使用数组或其他数据结构作为数据源，例如 items = [{id:1, text:'Item 1'}, {id:2, text:'Item 2'}]。 拖放操作修改的是这个数组的元素顺序，而不是 DOM 元素的顺序。

2. 事件监听: 监听 dragstart 和 dragend 事件，获取拖拽元素的原始索引和目标索引。

3. 数据移动: 编写一个 move(array, oldIndex, newIndex) 函数，用于在数据数组中移动元素。

4. 视图更新: 数据数组更新后，重新渲染视图以反映新的顺序。 这可能涉及到使用框架的 setState 或类似方法。

   

   Devv

   Devv是一个专为程序员打造的新一代AI搜索引擎

   140

   查看详情

5. 持久化存储: 使用 localStorage 或其他持久化机制保存更新后的数据数组。 下次加载页面时，从存储中读取数据并初始化视图。

直接操作 DOM 元素的替代方法 (不推荐):

如果必须直接操作 DOM，则需要：

1. DOM-数据绑定: 建立 DOM 元素与数据项之间的映射关系，以便在拖放后能根据 DOM 顺序重建数据。 例如，可以为每个 li.card 元素添加一个 data-index 属性，存储其原始索引。

2. 序列化 DOM: 拖放结束后，遍历 li.card 元素，读取其 data-index 属性，重建数据数组的顺序。

3. 持久化存储: 将重建的数据数组保存到 localStorage。

总而言之，数据驱动的方法更清晰、更易于维护，也更适合大型应用。 直接操作 DOM 的方法虽然可行，但容易出错且难以扩展。 强烈建议使用数据驱动的方法来处理 JavaScript 拖放排序和持久化存储。

以上就是JavaScript拖放排序后如何保存位置？的详细内容，更多请关注php中文网其它相关文章！