html5长按 排序,H5 长按 拖拽排序的实现，怎么保存方便下次显示

HTML5中的长按排序和拖拽功能通常通过JavaScript库如Sortable.js、GridStack.js等来实现。以下是基本步骤：

1. 引入必要的库：在HTML文件中引入排序库的CDN链接，例如：

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>

2. 设置数据源：将需要排序的元素添加到DOM中，并给每个元素一个唯一的标识符（如`data-id`）用于保存位置信息。

<div id="draggable-items" data-id="item1">列表项1</div>
<!-- 更多列表项... -->

3. 初始化排序功能：在JavaScript中，对包含待排序元素的容器应用排序插件，设置允许长按和拖拽的功能。

const sortable = new Sortable(
  document.getElementById('draggable-items'),
  {
    onSortEnd: function(event) { // 当排序结束时更新位置信息
      const item1 = event.newIndex + 1;
      const item2 = event.oldIndex + 1;
      localStorage.setItem(`item${item1}-order`, item2); // 使用localStorage存储排序后的顺序
    },
    draggable: '.draggable',
    handle: '.handle', // 如果有特定元素作为拖动把手
    ghostClass: 'sortable-ghost', // 拖拽过程中的临时元素样式
    animation: 150, // 动画效果时间
    tolerance: ['pointer', 'touch'] // 长按和触摸模式
  }
);

4. 读取并显示排序状态：当页面加载时，从localStorage中恢复已排序的数据，然后应用到实际的DOM结构上。

window.onload = function() {
  const items = document.querySelectorAll('#draggable-items div');
  for (let i = 0; i < items.length; i++) {
    const storedOrder = parseInt(localStorage.getItem(`item${i+1}-order`), 10);
    if (storedOrder !== undefined) {
      items[i].insertBefore(items[storedOrder], items[i]);
    }
  }
};