Documentación/API
Modificadores y colisión
Las funciones que cambian adónde va el ítem arrastrado, y las que eligen el destino que tiene debajo.
Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés
Cargando la demo…
<script setup lang="ts">
import { ref } from 'vue';
import { DnDProvider, closestCenter, closestCorners, pointerFirst, pointerWithin, rectIntersection } from '@vue-dnd-kit/core';
import ModifierLab from './ModifierLab.vue';
// Collision detection is the provider's: it picks the target, here one of the two pads.
const COLLISIONS = { pointerFirst, pointerWithin, rectIntersection, closestCenter, closestCorners };
const collision = ref<keyof typeof COLLISIONS>('pointerFirst');
</script>
<template>
<DnDProvider :collision="COLLISIONS[collision]">
<div class="demo">
<code class="call"><DnDProvider :collision="{{ collision }}"></code>
<div class="collisions" role="radiogroup" aria-label="collision">
<label v-for="name in Object.keys(COLLISIONS)" :key="name" :class="{ on: collision === name }">
<input v-model="collision" type="radio" :value="name" />
{{ name }}
</label>
</div>
<ModifierLab />
</div>
</DnDProvider>
</template>
<style scoped>
.demo {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.collisions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px;
max-width: 100%;
padding: 3px;
border-radius: 9px;
background: color-mix(in srgb, currentColor 7%, transparent);
}
.call {
font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
color: #42b883;
}
label {
padding: 4px 8px;
border-radius: 6px;
font: 11px/1.3 ui-monospace, Menlo, Consolas, monospace;
cursor: pointer;
}
label.on {
background: Canvas;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
font-weight: 600;
}
label:has(input:focus-visible) {
outline: 2px solid #42b883;
}
input {
position: absolute;
opacity: 0;
pointer-events: none;
}
</style>Modificadores
import { restrictToParent, snapToGrid } from '@vue-dnd-kit/core';
makeSortableList(list, { items, modifiers: [restrictToParent] });
makeDragArea(board, { modifiers: [snapToGrid({ x: 24, y: 24, smooth: true })] });
Un modificador recibe el desplazamiento del arrastre y devuelve uno nuevo. Se ejecutan en orden:
los modifiers del provider, los de un área de arrastre, los propios del elemento arrastrable (o
los de su lista), luego los límites del área (restrictToArea) y, al final, el bloqueo de axis.
Consulta Ejes, límites y cuadrículas.
ModifierMueve solo en vertical: en horizontal se queda con el contenido en el que empezó (containerShift), se desplace como se desplace la página. La opción axis: 'y' hace lo mismo, en último lugar.
ModifierMueve solo en horizontal: en vertical se queda con el contenido en el que empezó (containerShift), se desplace como se desplace la página. La opción axis: 'x' hace lo mismo, en último lugar.
ModifierMantiene el overlay dentro de la ventana.
ModifierMantiene el overlay dentro del contenedor donde empezó el arrastre: la lista ordenable (no su padre en el DOM) o, para elementos arrastrables simples, el elemento padre.
(target: MaybeElementRef) => ModifierMantiene el overlay dentro de un elemento: el elemento, una ref o un getter.
ModifierMantiene el overlay dentro del primer ancestro desplazable del elemento arrastrado.
(size: number | SnapToGridOptions) => ModifierAjusta el overlay a una cuadrícula, a la celda más cercana: un número es el tamaño de celdas cuadradas; las opciones fijan cada eje, dónde empieza la cuadrícula y un deslizamiento entre celdas (SnapToGridOptions).
ModifierCentra el overlay bajo el puntero en lugar de mantener el desplazamiento del agarre.
Opciones de snapToGrid.
numberEl ancho de la celda en px. Sin él (o con 0), el arrastre se mueve libremente en x.
numberEl alto de la celda en px. Sin él (o con 0), el arrastre se mueve libremente en y: { y: 15 } ajusta solo la hora de un evento de calendario.
'container' | 'delta''container' (por defecto): la esquina superior izquierda del overlay cae en líneas de cuadrícula trazadas desde la esquina superior izquierda del contenedor (containerRect: la lista ordenable o el elemento padre). 'delta': se redondea el desplazamiento del arrastre, conservando la posición de partida del ítem fuera de la cuadrícula.
boolean | AnimationOptionsDesliza el overlay entre las posiciones ajustadas (por defecto 80 ms). La detección de colisiones sigue usando al instante la posición ajustada.
Cambia adónde va el ítem arrastrado: recibe el desplazamiento del arrastre (transform) y devuelve uno nuevo.
type Modifier = (args: ModifierArgs) => CoordinatesLo que recibe un modificador en cada movimiento del arrastre.
CoordinatesDesplazamiento desde el inicio del arrastre, tal como lo modificaron los modificadores anteriores.
ActiveEl arrastre.
RectRectángulo del elemento arrastrado al inicio del arrastre.
RectRectángulo de la caja del overlay si se moviera según transform, con el tamaño que tiene ahora. Con overlayFit: 'slot' la caja cambia de tamaño alrededor del puntero, así que no siempre es activeRect movido según transform.
CoordinatesPosición del puntero al inicio del arrastre.
Rect | nullContenedor de la lista ordenable (o elemento padre) del ítem arrastrado, donde está ahora (sigue al scroll).
CoordinatesCuánto se ha movido en pantalla, desde el inicio, el contenido donde empezó el arrastre: el contenedor se movió (la página o un contenedor a su alrededor se desplazó, la maquetación cambió) y su contenido se desplazó dentro de él. Los bloqueos de eje mantienen ahí el otro eje, así que el arrastre se queda en su fila o columna de ese contenido.
RectRectángulo de la ventana (el viewport).
Over | nullEl destino de drop bajo el arrastre, según se encontró por última vez; null si no está sobre nada.
Detección de colisiones
import { closestCorners } from '@vue-dnd-kit/core';
<DnDProvider :collision="closestCorners" />
La collision del provider elige el destino; el mejor candidato va primero.
CollisionDetectionPor defecto: lo que está bajo el puntero; si no, lo que solapa el overlay.
CollisionDetectionDestinos bajo el puntero, mediante prueba de colisión: respeta el orden z, los overlays y los shadow roots.
CollisionDetectionDestinos que solapa el overlay: mayor prioridad, luego anidamiento más profundo, luego intersección sobre unión.
CollisionDetectionTodos los destinos, por distancia entre centros.
CollisionDetectionTodos los destinos, por la suma de distancias entre esquinas (útil para destinos apilados como las columnas de un tablero kanban).
Devuelve los ids de los candidatos, el mejor primero.
type CollisionDetection = (args: CollisionArgs) => Key[]Lo que recibe una detección de colisiones en cada movimiento del arrastre.
CoordinatesEl puntero en coordenadas del viewport, después de los modificadores.
Rect | nullRectángulo de la caja arrastrada (el overlay, o el propio elemento con overlay: false) donde la ha llevado el arrastre.
CollisionCandidate[]Todos los destinos de drop a los que podría ir el arrastre, tanto si su regla accept acepta el arrastre como si no.
Key[]Destinos de drop bajo el puntero según la prueba de colisión (respeta el orden z y los shadow roots), el mejor primero.
Un destino de drop que una detección de colisiones puede elegir: activado, en la página y no recortado del todo.
KeyId del destino de drop.
RectParte visible del destino: recortada por sus contenedores desplazables y por el viewport.
numberLa priority del destino (por defecto 0): gana la más alta cuando los destinos se solapan sin anidarse. Los ítems ordenables ganan a los contenedores.
numberNivel de anidamiento entre los destinos de drop: 0 en el nivel superior; los destinos más profundos tienen valores más altos.