Pragmatic Drag and Drop 项目教程

1. 项目介绍

Pragmatic Drag and Drop 是一个低级别的拖放工具链，旨在安全且成功地使用浏览器的内置拖放功能。该项目可以与任何视图层（如 React、Svelte、Vue、Angular 等）一起使用，并且已经在一些最大的 Web 产品中得到应用，包括 Trello、Jira 和 Confluence。

主要特点

• 低级别拖放行为：提供核心包和多个可选包，用于创建任何拖放体验。
• 轻量级：核心包大小约为 4.7kB。
• 灵活性：支持任何前端框架，并允许延迟加载以进一步提高页面加载速度。
• 跨平台支持：在 Firefox、Safari、Chrome、iOS 和 Android 上完全支持。
• 虚拟化支持：支持创建任何虚拟体验。
• 可选的视觉输出：提供可选的视觉输出（如下拉指示器），以快速构建一致的用户体验。
• 辅助技术支持：提供工具链，以便快速为辅助技术用户设置高性能的友好流程。

2. 项目快速启动

安装

首先，通过 npm 安装 Pragmatic Drag and Drop 的核心包：

npm install @atlaskit/pragmatic-drag-and-drop

基本使用

以下是一个简单的示例，展示如何在 React 中使用 Pragmatic Drag and Drop：

import React from 'react';
import { Draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

const MyDraggableComponent = () => {
  return (
    <Draggable>
      <div style={{ width: '100px', height: '100px', backgroundColor: 'blue' }}>
        Drag me!
      </div>
    </Draggable>
  );
};

export default MyDraggableComponent;

运行项目

确保你已经安装了 React 项目，然后运行以下命令启动项目：

npm start

3. 应用案例和最佳实践

应用案例

• Trello：使用 Pragmatic Drag and Drop 实现了卡片在列表之间的拖放功能。
• Jira：在任务板中使用该工具实现了任务的拖放排序。
• Confluence：在页面编辑器中使用该工具实现了内容的拖放布局。

最佳实践

• 性能优化：使用延迟加载功能，以减少页面加载时间。
• 辅助技术支持：确保为辅助技术用户提供友好的拖放体验。
• 自定义视觉输出：根据项目的设计语言自定义拖放的视觉输出。

4. 典型生态项目

Pragmatic Drag and Drop 可以与其他 Atlassian 项目和开源项目结合使用，以增强用户体验和功能。以下是一些典型的生态项目：

• Atlassian Design System：提供一致的设计语言和组件，可以与 Pragmatic Drag and Drop 结合使用。
• React：作为前端框架，与 Pragmatic Drag and Drop 无缝集成。
• Vue.js：另一个流行的前端框架，也可以与 Pragmatic Drag and Drop 结合使用。
• Svelte：轻量级的前端框架，适合与 Pragmatic Drag and Drop 一起使用以实现高性能的拖放体验。

通过结合这些生态项目，开发者可以创建出功能强大且用户体验良好的拖放应用。