--- title: "样式" description: "为拖拽的每一种状态设置样式——用于纯 CSS 的 data 属性、用于 class 的 ref、表明接收与否的目标、拖拽期间的浮层和页面、默认样式、Tailwind 以及 UI 库。" canonical_url: "https://zizigy.github.io/vue-dnd-kit/zh/docs/guides/styling" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) 库几乎不设置任何样式。拖拽的每种状态都以两种方式提供给你：一种是 `data-dnd-*` 属性，用于纯 CSS；另一种是组合式函数返回的 ref，用于 class 和条件渲染的标记。按你的技术栈选择其一，或两者并用。 ## data 属性 下面的行完全没有状态 class：所有外观都来自属性。面板会列出页面上随时出现和消失的属性。按住 或 选中两行并拖动它们：多项拖拽中的其他项也会出现。
属性 位于 时机
data-dnd-placeholder 可排序项 它是被拖拽项将落入的位置。拖拽位于 项内部的放置目标 上方时为 "into" ：放置会落到那个目标里，空位只是占住它的位置。
data-dnd-dragging 可排序项 它被拖拽但留在原处： 'gaps' 模式下多项拖拽中的其他项。
data-dnd-dragging="pointer" 或 "keyboard" 整个拖拽期间。
data-dnd-overlay="dragging" 或 "dropping" 浮层盒子 始终存在。落位期间以及异步 onBeforeDrop 等待期间为 dropping 。
data-dnd-overlay-content 浮层的内容 始终存在：填满盒子、承载它所显示内容的元素。动画由你来加；它接收 provider 的 overlayClass 。
data-dnd-leaving animateChanges 留下的副本 离开的项淡出期间。
data-dnd-no-clone 由你设置 把该元素排除在浮层的副本之外：提示框、菜单、徽标。
```css [TaskRow.vue] /* The slot a dragged row will land in: a striped gap. */ .row[data-dnd-placeholder] { opacity: 1; background: repeating-linear-gradient(-45deg, color-mix(in srgb, #42b883 16%, transparent) 0 6px, transparent 6px 12px); } .row[data-dnd-placeholder] > * { visibility: hidden; /* an empty slot of the row's exact size */ } /* Selected rows left in place by a multi-drag (`multiple: 'gaps'`). */ .row[data-dnd-dragging] { opacity: 0.4; } /* The copy in the overlay, while it travels. */ [data-dnd-overlay='dragging'] .row { box-shadow: 0 0 0 1.5px #42b883, 0 14px 24px -10px rgb(0 0 0 / 0.55); } ``` ```vue [TaskRow.vue]
  • {{ task.title }}
    • ``` - 浮层中行的副本保留它的 class 和属性，包括 Vue 的作用域属性，所以 `[data-dnd-overlay] .row` 写在行自己的 ` ``` ```vue [RefList.vue] ```
    组合式函数 状态
    makeSortableItem isDragging 、 isPlaceholder 、 selected 、 indicator 、 index
    makeSortableList 、 makeSortableTree isOver 、 isAccepting 、 indicator 、 activeKey 、 activeIndex
    makeDraggable isDragging 、 selected 、 transform
    makeDroppable isOver 、 isAccepting 、 placement
    makeDragArea isDragging 、 isAutoScrolling
    useDnD() status 、 active 、 over 、 pointer 、 activation.progress 、 isAutoScrolling
    - `isPlaceholder`：此元素是被拖拽项将落入的位置。在 `'group'` 模式的多项拖拽中，随之移动的项的位置也是占位。 - `isDragging`：该项是拖拽的一部分：多项拖拽中的每个被拖拽项都是。 - `isAccepting`：有东西正被拖拽，且此目标接收它。点亮可以放置的地方。 - `isOver`：拖拽位于此目标上方，无论它是否接收。`isOver && !isAccepting` 表示拒绝：把它显示出来。 - `indicator`：在[指示器模式](https://zizigy.github.io/docs/guides/sortable-lists#an-insertion-line)下插入线的位置。 - `activation.progress`：触摸长按或 `delay` 进行期间从 0 到 1。用它填充一个圆环。 ## 放置目标：接收与拒绝 拖拽进行时，目标有四种外观：接收该拖拽；接收且指针在它上方；拒绝该拖拽；拒绝且指针在它上方。把四种都显示出来，并在被拖拽的项上也表明这一点。 ```ts [Palette.vue] const { isOver, isAccepting } = makeDroppable(el, { accept: props.tone, onDrop }); const { active } = useDnD(); const state = computed(() => { if (!active.value) return ''; if (isOver.value) return isAccepting.value ? 'over' : 'refused'; return isAccepting.value ? 'accepting' : 'refusing'; }); ``` ```css [Palette.vue] .palette.accepting { border-style: dashed; border-color: #42b883; } /* an invitation */ .palette.over { border-color: #42b883; background: color-mix(in srgb, #42b883 14%, Canvas); } .palette.refusing { opacity: 0.45; } /* out of the way */ .palette.refused { border-color: #f43f5e; animation: shake 0.3s; } /* a drop here is cancelled */ ``` 被拖拽的色块是 provider 的 `#overlay` 插槽。它会收到 `over` 和 `accepted`：在拒绝该拖拽的目标上方时，`accepted` 为 `false`。 ```vue [index.vue] ``` 在浮层之外，`useDnD().over.value?.accepted` 表达的是同样的信息。更多关于浮层组件的内容见[浮层](https://zizigy.github.io/docs/guides/overlay)。 ## 浮层与页面 两个属性涵盖了拖拽的其余部分：浮层盒子上的 `data-dnd-overlay`，以及 `` 上的 `data-dnd-dragging`，值为 `"pointer"` 或 `"keyboard"`。便签上方的栏读取第二个属性，并说明哪些按键可用。开启慢速保存：浮层会在你松开的地方保持 `dropping`，直到 `onBeforeDrop` 完成，并把这一点显示出来。 ```css [index.vue] .bar .pointer, .bar .keyboard, html[data-dnd-dragging] .bar .idle { display: none; } html[data-dnd-dragging='pointer'] .bar .pointer, html[data-dnd-dragging='keyboard'] .bar .keyboard { display: inline; } ``` ```css [StickyNote.vue] [data-dnd-overlay='dragging'] .note { box-shadow: 0 0 0 2px #42b883, 0 22px 30px -14px rgb(0 0 0 / 0.6); } /* Landing, and waiting for the save. */ [data-dnd-overlay='dropping'] .note { opacity: 0.85; } [data-dnd-overlay='dropping'] .saving { display: flex; } ``` - `dropping` 涵盖落位以及异步 `onBeforeDrop` 的等待。等待期间，`` 退出拖拽模式：页面的光标和文本选择恢复，所以确认对话框照常工作。 - 为盒子**内部**的内容设置样式。盒子本身由库通过 `transform` 移动，并通过 `width` 和 `height` 设置尺寸。它的内容元素 `[data-dnd-overlay-content]` 填满盒子，归你使用：在这里抬起和倾斜整个浮层（见[动画](https://zizigy.github.io/docs/guides/animations#the-overlay-lift-tilt-settle)）。 - 副本的根元素内联了 `transform: none`：用 `rotate` 和 `scale` 旋转或放大它。过渡和关键帧都能作用于它：见[动画](https://zizigy.github.io/docs/guides/animations#the-overlay-lift-tilt-settle)。 - 副本按元素本来的样子显示，不会猜测背景。由列表绘制背景的行（白色 `