拖拽流程是一组事件接力：被拖元素上设 draggable=true 并监听 dragstart（放数据），目标区域监听 dragover（必须 preventDefault 才允许放下）和 drop（取出数据并处理）。最难踩的坑就是 dragover 不阻止默认行为，drop 事件根本不触发。
dataTransfer 是数据中转站：setData/dragstart 存数据，drop 时 getData 取出，effectAllowed 与 dropEffect 控制拖拽视觉效果（复制/移动/链接）。把文件拖进页面时 drop 事件 event.dataTransfer.files 就是文件列表，配合 FileReader 可以直接预览。
<style> .src { width: 120px; padding: 14px; background: #4a9eff; color: #fff; border-radius: 8px; cursor: grab; user-select: none; } .dst { width: 260px; height: 110px; margin-top: 14px; border: 2px dashed #e78a3e; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #888; } .dst.over { border-color: #39c5cf; background: rgba(57,197,207,.12); } </style> <div class="src" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','我是拖过来的内容')">拖我过去</div> <div class="dst" ondragover="event.preventDefault();this.classList.add('over')" ondragleave="this.classList.remove('over')" ondrop="event.preventDefault();this.textContent=event.dataTransfer.getData('text/plain')">拖到这里放下</div>