html5长按 排序,H5 长按 拖拽排序保存数据库的实现

HTML5 中的长按排序功能通常结合JavaScript库如Sortable.js或者Hammer.js来实现。以下是基本步骤：

1. 引入库：首先需要引入Sortable.js库或者其他支持拖拽事件的库。

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

2. HTML结构：创建可以被排序的元素，例如li列表项，并添加数据属性来标识每个元素。

<ul id="sortable-list">
  <li data-id="1">项目1</li>
  <li data-id="2">项目2</li>
  <!-- 更多列表项 -->
</ul>

3. JavaScript初始化排序：在页面加载完成后，使用Sortable实例化并设置排序规则。

document.addEventListener('DOMContentLoaded', function() {
  Sortable.create('#sortable-list', {
    // 设置选项，比如阻止冒泡、动画等
    onEnd: function(event) { // 拖放结束后处理
      const newOrder = event.newIndex; // 获取新的排序数组
      saveToDatabase(newOrder); // 调用函数保存到数据库
    },
  });
});

4. 保存到数据库：在`saveToDatabase`函数中，你可以使用AJAX或其他技术将新排序的列表顺序发送到服务器，然后更新数据库中的对应顺序。

function saveToDatabase(order) {
  fetch('/api/save-order', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ listId: 'your_list_id', order }),
  })
    .then(response => response.json())
    .catch(error => console.error('Error saving:', error));
}