快速拖放以获得任何技术堆栈上的任何体验
文档| ?示例| ?它是如何运作的
实用拖放是一个低级拖放工具链,可以安全、成功地使用内置拖放功能的浏览器。实用的拖放功能可用于任何视图层( react
、 svelte
、 vue
、 angular
等)。实用的拖放功能正在为网络上一些最大的产品提供动力,包括 Trello、Jira 和 Confluence。
实用的拖放由几个高级部分组成:
实用拖放包含一个核心包和许多可选包,它们为您提供创建任何拖放体验的各个部分。
这些作品对视觉语言或可访问性没有任何意见,并且不依赖于 Atlassian 设计系统。
4.7kB
核心我们创建了可选的视觉输出(例如我们的掉落指示器),使我们能够超快地构建一致的 Atlassian 用户体验。欢迎非 Atlassian 消费者使用这些输出,创建自己的输出来复制视觉样式,或者走完全不同的方向。
并非所有用户都能实现基于指针的拖放体验。为了给辅助技术用户带来美妙的体验,我们提供了一个工具链,使您能够快速连接高性能的辅助技术友好流程,以获得任何体验。
我们提供的可选辅助控制装置基于 Atlassian 设计系统。如果您不想使用 Atlassian 设计系统,您可以使用我们的指南并用您自己的组件替换我们的组件,或者如果您选择,也可以采用不同的方式来实现可访问性。
该存储库目前是我们内部单一存储库的一种镜像,其中包含用于实用拖放的所有代码。
该存储库的目的是公开我们的代码,但不接受代码贡献(现阶段)。将来我们可以探索建立一个双向镜像,以便对该存储库的贡献也可以返回到我们的单一存储库。仍然欢迎您对此存储库提出问题或建议!
所有文档和npm
包都是公开的,可供所有人使用
是的!实用的拖放作为一个小的核心包,然后是一系列可选包。一些可选包依赖于样式解决方案(例如emotion
)、视图库(例如react
)或一些附加的Atlassian输出(例如@atlaskit/tokens
)。我们已经分离出具有其他依赖项的可选包,以便它们可以轻松地与使用您自己的技术堆栈和视觉输出的您自己的部分进行交换。
是的!我们创建了一些设计指南,其中体现了我们希望如何在产品中实现拖放,其中一些决策体现在一些可选包中。但是,您可以自由使用您喜欢的任何设计语言,包括我们的!
@atlaskit
? Pragmatic 拖放包发布在npm
上的@atlaskit
命名空间下
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter' ;
@atlaskit
是npm
命名空间,我们从内部 monorepo 内部发布所有公共包。我们可以考虑在将来创建一个单独的命名空间,仅用于实用的拖放操作。如果我们这样做,我们将发布一些工具来帮助人们自动切换。
用爱制作:
务实的拖放站在巨人的肩膀上,包括创建拖放规范、在浏览器中实现拖放的人们以及在此之前出现的许多拖放库。