核心是利用原生javascript监听dragstart、dragover、drop事件，动态计算插入位置并操作dom；需设draggable="true"，dragstart存数据，dragover阻止默认行为，drop中依鼠标y坐标决定insertbefore位置，配合视觉反馈与样式优化。
实现页面区块的拖拽自由排序，核心是利用原生 JavaScript 监听拖拽事件（dragstart、dragover、drop 等），结合 DOM 元素的插入位置动态调整顺序。不需要依赖 jQuery 或第三方库，纯 DOM 操作即可完成，关键在于正确处理 drop 时的插入逻辑和视觉反馈。
启用拖拽并标识可拖拽元素
默认情况下，只有链接、图片等少数元素支持拖拽。要让任意区块（如 <div class="item">）可拖拽，需设置 <code>draggable="true" 属性，并在 dragstart 中指定拖拽数据：
- 给每个可排序项添加
draggable="true"，例如：<div class="item" draggable="true">内容</div> - 在
dragstart中调用e.dataTransfer.setData('text/plain', e.target.dataset.id)（推荐用dataset.id标识唯一性） - 可选：设置
e.dataTransfer.effectAllowed = 'move'明确只允许移动
阻止默认行为并提供拖拽进入反馈
dragover 事件默认被浏览器阻止，必须显式调用 e.preventDefault() 才能触发 drop；同时可通过样式变化提示用户当前可投放区域：
- 为容器（如
.sortable-container）监听dragover，立即执行e.preventDefault() - 可监听
dragenter给目标项临时加边框或背景色（如e.target.classList.add('drop-target')），再在dragleave移除 - 注意：避免对
dragover做过多计算，保持响应迅速
在 drop 时精准插入到目标位置
真正的排序逻辑发生在 drop 事件中。不能简单地把拖拽元素 appendChild 到容器末尾，而应根据鼠标位置判断插入点（上方/下方）：
- 在
drop回调中，先e.preventDefault()阻止默认跳转 - 获取当前鼠标在目标元素内的 Y 坐标：
const rect = e.target.getBoundingClientRect(); const y = e.clientY - rect.top; - 若
y ，表示靠近顶部 → 插入到目标元素之前（<code>container.insertBefore(dragged, target)） - 否则插入到目标元素之后（
container.insertBefore(dragged, target.nextSibling)） - 务必检查
target是否为容器本身（非子项），此时按鼠标位置决定插到开头或结尾
优化体验与边界处理
基础功能跑通后，几个细节让拖拽更自然、健壮：
- 拖拽过程中隐藏源元素（
e.target.style.opacity = '0.4'），避免视觉重叠干扰 - 在
dragend中恢复样式，并清理临时 class（如drop-target） - 禁止拖拽到自身：在
drop中判断e.target === dragged，直接返回 - 若使用 CSS Flex/Grid 布局，确保父容器未设置
flex-wrap: wrap导致换行错乱，推荐用flex-direction: column或纯文档流
