@dnd-kit/ svelte (英语)
斯维尔特适配器 @dnd-kit (英语) 一个轻量级、能发挥的和可扩展的拖放工具包。 建于顶上 @dnd-kit/dom它提供了平庸的 Svelte 5原始人使用 runes 和 附录。 。 。 .
所需资源
- 丝绒 5.29 联合国 或稍后时间
安装
npm install @dnd-kit/svelte
快开始
<script>
import {DragDropProvider, createDraggable, createDroppable} from '@dnd-kit/svelte';
let droppedIn = $state(false);
const draggable = createDraggable({id: 'draggable'});
const droppable = createDroppable({id: 'droppable'});
function onDragEnd(event) {
if (event.canceled) return;
droppedIn = event.operation.target?.id === 'droppable';
}
</script>
<DragDropProvider {onDragEnd}>
{#if !droppedIn}
<button {@attach draggable.attach}>Drag me</button>
{/if}
<div {@attach droppable.attach}>
{#if droppedIn}
<button {@attach draggable.attach}>Dropped!</button>
{/if}
</div>
</DragDropProvider>
初级
| 初级 | 导入 | 说明 |
|---|---|---|
createDraggable | @dnd-kit/svelte | 让元素可拖动 |
createDroppable | @dnd-kit/svelte | 创建投放目标 |
createSortable | @dnd-kit/svelte/sortable | 组合拖放和排序 |
每个原始返回一个具有反应状态的物体(例如. isDragging, (中文(简体) ), isDropTarget和 attach 编号 : attachHandle 函数用于 {@attach} 指令.
构成部分
<DragDropProvider>——将您的拖放接口包起来,管理传感器,插件和事件.<DragOverlay>——在拖动操作中渲染自定义的叠加元素.
文档
访问 dndkit.com (英语) 用于完整的文档、指南和互动实例.