dnd-kit 开源项目教程

最新推荐文章于 2024-08-08 08:17:28 发布

戚宾来

最新推荐文章于 2024-08-08 08:17:28 发布

阅读量506

点赞数 19

本文链接：https://blog.csdn.net/gitblog_00699/article/details/141010557

版权

dnd-kit 开源项目教程

dnd-kitThe modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.项目地址:https://gitcode.com/gh_mirrors/dn/dnd-kit

项目介绍

dnd-kit 是一个为 React 设计的高性能、模块化、可访问且可扩展的拖放工具包。它提供了丰富的功能，如自定义碰撞检测算法、多激活器、拖动覆盖、拖动手柄、自动滚动、约束等。dnd-kit 的核心库暴露了两个主要概念：可拖动元素（Draggable elements）和可放置区域（Droppable areas）。通过使用钩子（如 useDraggable 和 useDroppable），开发者可以轻松地构建拖放界面，而无需重新架构应用或创建额外的包装 DOM 节点。

项目快速启动

以下是一个简单的快速启动示例，展示了如何使用 dnd-kit 创建一个基本的拖放界面。

安装依赖

首先，需要安装 dnd-kit 及其相关包：

npm install @dnd-kit/core @dnd-kit/sortable

创建拖放组件

接下来，创建一个简单的拖放组件：

import React from 'react';
import { DndContext, useDraggable, useDroppable } from '@dnd-kit/core';
import { SortableContext, useSortable } from '@dnd-kit/sortable';

function DraggableItem({ id }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({ id });
  const style = transform ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)` } : undefined;

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      {id}
    </div>
  );
}

function DroppableContainer({ id, children }) {
  const { setNodeRef } = useDroppable({ id });

  return (
    <div ref={setNodeRef}>
      {children}
    </div>
  );
}

function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <DndContext>
      <SortableContext items={items}>
        <DroppableContainer id="droppable">
          {items.map(item => (
            <DraggableItem key={item} id={item} />
          ))}
        </DroppableContainer>
      </SortableContext>
    </DndContext>
  );
}

export default App;