【Hacker News搬运】功能丰富的前端拖放组件库

hackernews

Title: A feature-rich front-end drag-and-drop component library

功能丰富的前端拖放组件库

Text:

Url: https://github.com/atlassian/pragmatic-drag-and-drop

Pragmatic Drag and Drop 是一个低级别的拖放工具链，它使得浏览器内置的拖放功能能够安全且成功地被使用。它适用于任何视图层（如React、Svelte、Vue、Angular等），并且已经在一些最大的网络产品中使用，包括Trello、Jira和Confluence。

Pragmatic Drag and Drop 包含几个高级组件：
1. 低级别的拖放行为：它包含一个核心包和多个可选包，为您提供创建任何拖放体验所需的组件。这些组件对视觉语言或可访问性没有意见，并且不依赖于Atlassian设计系统。
2. 可选的视觉输出：为了快速构建一致的Atlassian用户体验，我们创建了一些可选的视觉输出（例如我们的放置指示器）。非Atlassian消费者也欢迎使用这些输出，创建自己的视觉样式，或者完全不同的方向。
3. 可选的辅助技术控制：并非所有用户都能实现基于指针的拖放体验。为了为辅助技术用户提供出色的体验，我们提供了一套工具链，让您能够快速为任何体验设置高性能的辅助技术友好流程。

这个仓库目前是从我们的内部monorepo中单向镜像出来的，包含Pragmatic Drag and Drop的所有代码。我们公开了我们的代码，但目前不接受代码贡献。未来我们可能会考虑设置双向镜像，以便贡献可以回传到我们的monorepo。您仍然可以在该仓库上提出问题或建议！所有文档和npm包都是公开的，可供所有人使用。

您可以使用自己的设计系统吗？是的！Pragmatic Drag and Drop 有一个小核心包，然后是一系列可选包。一些可选包依赖于样式解决方案（例如`emotion`）、视图库（例如`react`）或一些额外的Atlassian输出（例如`@atlaskit/tokens`）。我们将具有其他依赖关系的可选包分离出来，以便它们可以轻松地与您自己的技术栈和视觉输出替换。

您可以使用自己的设计语言吗？是的！我们已经创建了一些设计指南，这些指南体现了我们希望如何在我们的产品中实现拖放，其中一些决策体现在一些可选包中。但是，您可以自由使用您喜欢的任何设计语言，包括我们的！

Pragmatic Drag and Drop 包在npm上以`@atlaskit`命名空间发布。`@atlaskit`是我们从内部monorepo中发布所有公共包的npm命名空间。如果我们为Pragmatic Drag and Drop创建一个单独的命名空间，我们将发布一些工具来帮助人们自动切换。

Pragmatic Drag and Drop 是由Atlassian的许多其他人员制作的，包括创建拖放规范、在浏览器中实现拖放以及在此之前的许多拖放库的人。

Post by: NeilSmith2048

Comments:

cjen: To provide some context for this, Atlassian originally created a drag and drop library called react-beautiful-dnd. A few years ago they stopped maintaining the library, and some community forks took over (I think @hello-pangea/dnd is the most popular).In the interim I've found <a href="https://dndkit.com" rel="nofollow">https://dndkit.com</a> a really nice solution, but it's only available in React-land.Looks like this new library was written at least in part by the same guy who wrote react-beautiful-dnd, so my hopes are high (as long as this one stays maintained...)

cjen: 为了提供一些上下文，Atlassian最初创建了一个名为react beautiful dnd的拖放库。几年前，他们停止了对图书馆的维护，一些社区分支接管了图书馆（我认为@hello-pangea&#x2F；dnd是最受欢迎的） 在此期间；我们发现<a href=“https://；&#x2F；dndkit.com”rel=“nofollow”>https://&#x2F；dndkit.com</a>一个很好的解决方案，但它；仅在React土地上可用 看起来这个新图书馆至少部分是由写react beautiful dnd的同一个人写的，所以我的希望很高（只要这个保持不变…）

alexreardon: Hi all,I am one of the creators of Pragmatic drag and drop (and react-beautiful-dnd).Thanks for the post @NeilSmith2048!I have had a quick read over the comments on this thread, and here is some information that folks might find helpful:- The web platform has powerful built in drag and drop functionality. Sadly though, that functionality has historically difficult to be successful with due to bugs, inconsistencies and API friction.- Pragmatic drag and drop is low level wrapper around web platform drag and drop and is attempting to provide a fast, safe and (hopefully) easy way to successfully unlock the power of the web platform- You can use Pragmatic drag and drop with any tech stack (svelte, vue, react, vanillajs etc) and you can use it to build any drag and drop experience you like- We have optimised Pragmatic drag and drop for performance and flexibility. It consists of a small core and lots of optional pieces. The big idea is that folks only ever need to include the code they need for their experience. Small pieces also allows folks to borrow as much as they can and only build the specific pieces they need for bespoke experiences. More details: <a href="https://www.youtube.com/watch?v=5SQkOyzZLHM" rel="nofollow">https://www.youtube.com/watch?v=5SQkOyzZLHM</a>- We make it easy to attach data for external windows and applications, and to receive data from them (and you only pay code for that functionality if you want it!)- Pragmatic drag and drop is already powering drag and drop in some of the biggest software products, including Trello, Jira and Confluence.- We have design guidance and accessibility guidance and outputs which folks are welcome to use, or you can create your own design and accessibility solutions- It works with multi drag. We already have multi drag in a few places in production, but we currently don't have public guidance or an example (work in progress!)I am happy to answer questions folks might have. It's a public holiday here in Australia, so I might not be able to reply to things until tomorrow.Cheers

alexreardon: 大家好，我是Pragmatic拖放（和react beautiful dnd）的创建者之一 感谢@NeilSmith2048的帖子 我已经快速阅读了这个帖子上的评论，这里有一些信息，人们可能会觉得很有帮助：-网络平台具有强大的内置拖放功能。遗憾的是，由于bug、不一致和API摩擦，该功能在历史上很难成功使用 -Pragmatic拖放是web平台拖放的底层包装，试图提供一种快速、安全且（希望）简单的方式来成功释放web平台的功能-您可以将Pragmatic拖拽与任何技术堆栈（svelte、vue、react、vanillajs等）一起使用，您可以使用它来构建您喜欢的_ _拖放体验-我们为性能和灵活性优化了Pragmatic拖拉。它由一个小核心和许多可选部件组成。最大的想法是，人们只需要包含他们体验所需的代码。小物件还允许人们尽可能多地借用，并且只建造定制体验所需的特定物件。更多详细信息：<a href=“https://；&#x2F；www.youtube.com&#x2F！watch？v=5SQkOyzZLHM”rel=“nofollow”>https://&#x2F；www.youtube.com&#x2F；看v=5SQkOyzZLHM</a>-我们可以轻松地为外部窗口和应用程序附加数据，并从中接收数据（如果您需要，您只需为该功能支付代码！）-务实的拖放已经在一些最大的软件产品中为拖放提供了动力，包括Trello、Jira和Confluence -我们有设计指南、无障碍指南和输出，欢迎人们使用，或者您可以创建自己的设计和无障碍解决方案-它适用于多拖动。我们已经在生产中的一些地方有了多重拖动，但我们目前没有；没有公共指导或例子（正在进行中！）我很乐意回答人们可能提出的问题。它；这是澳大利亚的公共假期，所以我可能要到明天才能回复 干杯

jjcm: I got to work with Alex on the precursor to this while I was at Atlassian. He's such a delight to work with. I was a prototyper at the time and I was always surprised about the types of edge cases he would come to me with - things I would have never even considered testing. There's so much work behind the scenes that happens to make these drag and drop interactions feel natural.

jjcm: 当我在Atlassian的时候，我开始和Alex一起做这件事的前兆。他；It’和他一起工作真高兴。当时我是一个原型作者，我总是对他会带着什么类型的边缘案例来找我感到惊讶——我甚至从来没有考虑过测试这些东西。有；有这么多的幕后工作，恰好让这些拖放交互感觉很自然。

donatj: We've been using SortableJS for years for similar functionality.<a href="https://sortablejs.github.io/Sortable/" rel="nofollow">https://sortablejs.github.io/Sortable/</a>

donatj: 我们；多年来，我一直在使用SortableJS来实现类似的功能 <a href=“https://；&#x2F；sortablejs.github.io&#x2F：可排序&#x2F”rel=“nofollow”>https://&#x2F；sortablejs.github.io&#x2F；可排序&#x2F</一

krick: Maybe it's totally unjustified, but I instinctively shudder seeing "UI" and "Atlassian" in the same context. Jira might be the only thing worse than MS Teams that I [am forced to] use on the daily basis.

krick: 也许它；这完全没有道理，但看到“；UI”；以及“；Atlassian”；在同样的背景下。Jira可能是我每天[被迫]使用的唯一比MS Teams更糟糕的东西。