HTML 自定义拖拽表单：轻松实现表单元素排序

HTML 本身不支持拖拽表单的功能，但可以通过 JavaScript 和一些 CSS 来实现自定义拖拽表单，使表单元素可自由排序。

以下是一个简单的拖拽表单示例：

HTML 代码：

<div id='form'>
  <div class='item' draggable='true'>
    <label>姓名：</label>
    <input type='text' name='name'>
  </div>
  <div class='item' draggable='true'>
    <label>邮箱：</label>
    <input type='email' name='email'>
  </div>
  <div class='item' draggable='true'>
    <label>电话：</label>
    <input type='tel' name='tel'>
  </div>
</div>

CSS 代码：

#form {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  margin: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.item:hover {
  cursor: move;
}

JavaScript 代码：

const form = document.querySelector('#form');
const items = document.querySelectorAll('.item');

let draggedItem = null;

items.forEach(item => {
  item.addEventListener('dragstart', () => {
    draggedItem = item;
    setTimeout(() => {
      item.style.display = 'none';
    }, 0);
  });

  item.addEventListener('dragend', () => {
    setTimeout(() => {
      draggedItem.style.display = 'block';
      draggedItem = null;
    }, 0);
  });
});

form.addEventListener('dragover', e => {
  e.preventDefault();
  const afterElement = getDragAfterElement(form, e.clientY);
  const draggable = document.querySelector('.dragging');
  if (afterElement == null) {
    form.appendChild(draggable);
  } else {
    form.insertBefore(draggable, afterElement);
  }
});

function getDragAfterElement(container, y) {
  const draggableElements = [...container.querySelectorAll('.item:not(.dragging)')];
  return draggableElements.reduce((closest, child) => {
    const box = child.getBoundingClientRect();
    const offset = y - box.top - box.height / 2;
    if (offset < 0 && offset > closest.offset) {
      return { offset: offset, element: child };
    } else {
      return closest;
    }
  }, { offset: Number.NEGATIVE_INFINITY }).element;
}

解释：

HTML 结构： 创建一个包含多个表单项的 div 元素，每个表单项都设置为 draggable='true'，以便可以拖动。
CSS 样式： 设置表单项的样式，并为拖动时添加一些样式提示，例如将鼠标指针变成移动图标。
JavaScript 代码：
- 使用 dragstart 和 dragend 事件监听器来处理拖动开始和结束，隐藏被拖动的元素，并在拖动结束后恢复显示。
- 使用 dragover 事件监听器来处理拖动过程中表单的排序。
- 使用 getDragAfterElement 函数确定拖动项应该插入的位置，根据鼠标指针位置和表单元素的位置进行计算。
- 将拖动项插入到正确的位置。

通过以上步骤，我们成功实现了自定义拖拽表单功能，用户可以根据自己的需求调整表单元素的顺序，提升用户体验和表单的灵活度。