Drag & Drop 拖放（Drag & Drop） web
The grips, handles, previews, and landing cues around a drag interaction
拖拽交互周边的抓手、手柄、预览和落点提示
To do
In review
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Drag handle (grip)拖拽手柄（Drag handle/grip）
draggable="true"“Those kind of a 3x3 or 2x2” dots are a drag handle, also called a grip or grabber.
“那种 3x3 或 2x2 的点阵”就是拖拽手柄，也叫抓手（grip/grabber）。
Prompt fragmentPrompt 片段a drag handle or grip on the draggable item (HTML draggable="true" or @dnd-kit/core listeners): a compact 3×3 or 2×2 dot matrix that clearly marks where to grab
可拖条目上的拖拽手柄/抓手（HTML draggable="true" 或 @dnd-kit/core listeners）：一个紧凑的 3×3 或 2×2 点阵，清楚标出抓握位置
-
2 Selection resize handles选择框调整手柄（Selection resize handles）
pointer events“Those squares, you know, that are on the corners” are selection resize handles around the selected object.
“你知道的，角上那些小方块”就是选中对象四周的调整手柄。
Prompt fragmentPrompt 片段selection resize handles using pointer events: small square controls on the selected object's corners and edges that resize it without acting as drag handles
用 pointer events 实现的选择框调整手柄：选中对象边角上的小方块控件，只调整大小，不当拖拽手柄用
-
3 Drop indicator (insertion line)放置指示线（Drop indicator/insertion line）
ondragover“Line indicators for where it will drop” are drop indicators, often drawn as an insertion line between items.
“指示落点的线”就是放置指示线，常画成条目之间的插入线。
Prompt fragmentPrompt 片段a drop indicator during ondragover: a clearly visible insertion line between items at the exact position where the dragged item will land
ondragover 期间的放置指示线：在拖拽条目将要落下的确切位置，于条目之间画一条清晰可见的插入线
-
4 Drop-target highlight放置目标高亮（Drop-target highlight）
ondragover“The neighboring terminal is highlighted as a whole” describes a drop-target highlight over the destination region.
“旁边那个终端整个被高亮”说的就是目标区域上的放置高亮。
Prompt fragmentPrompt 片段a drop-target highlight during ondragover: tint the whole valid destination or its precise split zone before the item is dropped
ondragover 期间的放置目标高亮：在条目落下前，把整个有效目的地或其精确的拆分区域染色
-
5 Drag preview (ghost)拖拽预览（Ghost 残影）
DataTransfer.setDragImage()The translucent copy that follows the pointer during a drag is the drag preview, often called the ghost.
拖拽过程中跟着指针的半透明副本就是拖拽预览，常叫 ghost（残影）。
Prompt fragmentPrompt 片段a drag preview or ghost (DataTransfer.setDragImage()): a lightweight translucent image of the dragged item that follows the pointer without obscuring the drop cues
拖拽预览/残影（DataTransfer.setDragImage()）：一张轻量半透明的被拖条目图像，跟着指针走，又不遮挡放置提示
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a Drag & Drop interaction with HTML draggable, ondragover, and ondrop (or @dnd-kit/core): show a drag handle, selection resize handles where applicable, a drag preview, and an insertion line or highlighted drop target before release. Do not use the deprecated aria-grabbed state; announce the picked-up item, available destination, and drop result through an ARIA live region.
用 HTML draggable、ondragover 和 ondrop（或 @dnd-kit/core）构建拖放交互：显示拖拽手柄，适用时显示选择框调整手柄，给出拖拽预览，松手前显示插入线或高亮放置目标。不要用废弃的 aria-grabbed；通过 ARIA live region 播报拿起的内容、可用目的地和放置结果。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my drag and drop (HTML draggable, ondragover/ondrop, dnd-kit). Rule out: drop never firing because dragover does not call preventDefault — that is the classic; dragleave firing when entering child elements so the highlight flickers — keep an enter/leave counter; setDragImage ignored because the ghost element is not in the DOM; touch devices doing nothing because native HTML5 DnD has no touch events — use a pointer-based library. The symptom:
调试我的拖放（HTML draggable、ondragover/ondrop、dnd-kit）。逐项排除：drop 从不触发，因为 dragover 没调 preventDefault —— 这是经典坑；进入子元素时 dragleave 也触发，高亮闪烁 —— 维护一个 enter/leave 计数器；setDragImage 被忽略，因为残影元素不在 DOM 里；触屏设备毫无反应，因为原生 HTML5 DnD 没有触摸事件 —— 换用 pointer 驱动的库。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | ondrop | |
| HTML | ondragover | |
| HTML | draggable="true" | |
| ARIA | aria-grabbed | deprecated; announce drag state and drop results with live regions instead已废弃；改用 live region 播报拖拽状态和放置结果 |
| dnd-kit | @dnd-kit/core |