CTheMyth

本文分享了前端三个高频使用的agent-skills, vue-skills, react-skills, ui-skills, 让AI生成的代码风格更统一，更专业

前言 最近逛 Reddit 的时候，看到一个关于最被低估的 JavaScript 特性的讨论，我对此进行了总结，和大家分享一下。 Hi，我是冴羽，学习前端，欢迎围观我的“网页版朋友圈”、踏上“前端大佬

dnd-kit 我称之为拖拽组件中的王者 git链接 文章地址 用过react-dnd和react-beautiful-dnd都没有dnd-kit组件灵活以及暴露的数据多

安装 使用 1.需要引入 DndContext 组件，他类似 react 的 Context 向下传递状态，他必须在拖拽组件的最外层 2.使用 useDroppable 创建一个可以掉落的区域

本篇为 dnd-kit 官方文档 中 DndContext 一章的中英对照翻译 对于碰撞检测知之甚少，有关章节请大佬们指正。

dnd-kit 仓库 README.md、官方文档中 Overview、Installation、Quick start 的中文翻译

由于前阵子需要在开发 Picals 的时候，需要实现一些拖动排序的功能。虽然有原生的浏览器 dragger API，不过纯靠自己手写很难实现自己想要的效果，更多的是吃力不讨好，于是决定采用这个库实现。

基础概念 DndContext 用于包装拖拽根组件，Draggable 和 Droppable 都需要包裹在 DndContext 内 Droppable 用于包装接收拖拽元素的组件，使组件能够放置

Dnd Kit 是一个轻量级、模块化、高性能、易于访问和可扩展的 React 拖放工具包。它可以让你轻松拖放组件。