如何用JS保存拖拽后元素的顺序？

利用JavaScript持久化保存拖拽元素的新顺序

为了在拖拽操作后保存元素的新顺序，需要以下步骤：

1. 获取更新后的元素排序。 使用getElementsByTagName()或更具选择性的方法（如querySelectorAll）获取所有可拖拽元素，并根据其新的DOM顺序构建一个数组。 数组中的每个元素应包含唯一标识符，例如其ID或数据属性，以便在重新加载页面时正确恢复顺序。

2. 将元素顺序序列化为JSON字符串。 使用JSON.stringify()方法将步骤1中创建的数组转换为JSON字符串，以便于存储和检索。

3. 将JSON字符串存储到本地存储。 使用localStorage.setItem()方法将JSON字符串保存到浏览器的本地存储中。

   

   SEEK.ai

   AI驱动的智能数据解决方案，询问您的任何数据并立即获得答案

   128

   查看详情

示例代码：

<code class="javascript">function saveDraggableOrder() {
  const draggables = document.querySelectorAll('.draggable'); // 使用更具选择性的选择器
  const order = Array.from(draggables).map(item => item.id); // 获取每个元素的ID

  localStorage.setItem('draggableOrder', JSON.stringify(order));
}</code>

这段代码假设可拖拽元素都具有唯一的draggable类名和ID属性。 Array.from将NodeList转换为数组，map方法提取每个元素的ID。

现在，拖拽后的顺序已保存在本地存储中。 页面重新加载时，可以从localStorage读取JSON字符串，并使用JSON.parse()解析它来恢复元素的顺序。 请注意，这需要配合相应的代码来根据恢复的顺序重新排列DOM元素。

以上就是如何用JS保存拖拽后元素的顺序？的详细内容，更多请关注php中文网其它相关文章！