近年来，由于技术的进步，用户以完全不同的方式访问了网站和在线内容。考虑到mobile and touch usage has hit an all-time high，许多用户期望应用程序以触摸为中心也就不足为奇了。使用这些设备的使用只会开始上升，如果您不优化与这些设备上的潜在客户和客户的互动，那么您就错过了很多成长的机会。
创建良好的用户体验对于Web和移动应用程序至关重要，并且拖放功能是为您的Web应用程序添加交互性的方便接口解决方案。它通常用于允许用户在网页上拖动项目，例如，从桌面或智能手机中拖动到Web应用程序中。这在需要用户重新排列项目或将内容从部分移至部分的UI中尤其重要。
拖放功能不仅会影响用户的导航或与网站内容的交互；它还与您的Web应用程序的整体用户体验有关，并为用户提供现代互动的用户体验。将某些东西从一个位置拖到另一个位置的能力是做许多事情的直接方法。
在此综述中，您将了解最佳的拖放库，供前端开发人员在Web应用程序中实现拖放功能时使用。您将根据其功能和功能，社区和商业支持，开发人员的经验以及易用性来查看这些图书馆。
为什么使用拖放库
HTML5 Drag and Drop API通常可用于在页面上制作可拖动的不同类型的内容和元素。但是，在更传统的HTML5 API实现上利用拖放库需要更少的努力来实施，因为基础逻辑被抽象出来。它可以更轻松地访问您的内容以及与用户的更高互动级别。
大量开源库可以帮助您创建可拖动和可移动的元素，例如可拖动列表，卡片和表。之所以选择以下库，是因为它们在开发复杂的应用程序时易于使用，维护良好，功能丰富且节省时间。
反应dnd
React DnD库使您可以在React应用程序中实现复杂的拖放用户界面，同时保持组件独立性。用户可以通过抓住对象在屏幕上移动对象并使用手势拖动它们。 React DND完全包含React的声明性渲染范式，并且不会突变DOM。 React DND根据需要包装您的组件和注射道具，而不是提供现成的小部件。
React DND是高度扩展的，可以根据触摸事件，鼠标事件或自定义事件来自定义后端。该库是建立在HTML5拖放API顶部的，React DND中真相的来源是数据，而不是视图。此外，它是社区得到充分支持和维护的。
React DND的一个主要缺点是，基本软件包react-dnd-html5-backend不支持触摸屏盒子。您还需要安装koude1 package才能支持触摸设备。
库是用户友好的，并且具有18,000 stars on GitHub。此外，它在npm上每周下载超过130万，并且已成为用于添加拖放功能的最广泛使用的库之一。
有关更多React DND示例，请查看其GitHub page。
反应拖盘
React生态系统中最好的拖放实现库之一是React-Draggable library，如果您需要在React应用程序中实现拖放功能，则可以使用它。
源代码显示其原理很简单，它提供了一个可拖动的包装器，其作业是包装一个用于拖放到您定义的组件中的组件。然后，它重新计算组件的位置并使用CSS变换在鼠标拖动时移动它。
库使用可拖动的API为<Draggable/>组件儿童和CSS Transform property添加拖曳性，无论其当前定位或现有变换属性如何，都可以移动元素。可拖动组件支持触摸输入，也可以通过传递网格属性来实现网格布局。
与其他拖放库相比，React-Draggable可以平衡功能和易用性。您需要实现简单的可拖动组件所需的大多数功能都包含在库中。此外，可反应的库库相对稳定，并且在GitHub上的几个类似项目迅速胜过，收集了7,000多颗恒星和3 million weekly downloads on npm。有了如此多的项目使用，您可以自信地在项目中使用它。
有关更多信息，此demo app包括许多反应拖曳库的用例。
反应 - 美丽dnd
react-beautiful-dnd是React生态系统中用于实现拖放功能的另一个库。在列表项目中专门设计的React-Beautiful-DND中有更高的抽象水平，这使其非常适合单向或一维布局，需要水平或垂直拖放运动。
>它的直接API使库易于使用，并且可以直接带有键盘可访问性。此外，它支持多种输入方法，例如鼠标，键盘和触摸。但是，对于使用Flexbox或电网（网格）的列表，对beautiful-dnd的工作可能具有挑战性。
。React-Beautiful-DND是由状态驱动的，并且支持嵌套的交互元素。该图书馆提供了直观且易于访问的拖放体验，并提供出色的文档和大量示例。 Jira背后的团队Atlassian维护了该图书馆的定期更新和支持。此外，它超过了1.3 million weekly downloads on npm，并在Github上有27,000星。
如果您想与React-Beautiful-DND一起玩，则有一个working demo。
React DND套件
React dnd kit是一种模块化的拖放工具包，可提供一种轻巧，性能，易于访问和可扩展的方式来构建拖放接口。您可以轻松地将组件转换为可拖动的元素和可辍学区域，而前面仅使用几行代码的库中几乎所有功能。
React DND套件可完全控制您的粪便和可拖动组件的表现。您可以选择仅使用所需的功能，因为它是作为莫诺普（MonorePo）开发的，它可以揭示各种软件包，并提供了创建新功能的可扩展性。
为了启用组件的拖放功能，该库提供了一组挂钩，例如useDraggable和useDroppable。这些挂钩使您可以在不需要重新设计应用程序或创建其他DOM节点包装器的情况下将拖放功能添加到React应用程序中。该库支持许多用例，包括列表，网格，游戏和具有多个嵌套上下文的容器。它还提供平滑的互动和动画，甚至在移动设备上，并定期更新。
可以自定义各个方面，包括动画，样式，过渡，行为和约束。此外，它还支持内置输入，例如鼠标，触摸和键盘，也可以创建自己的自定义输入。
图书馆是一个由社区维护的开源项目，它在NPM上每周下载超过311,000，并且具有5,300 stars on GitHub。有关使用React DND套件的更多示例，请查看their website。
sortablejs
SortableJS是一个轻巧的简约JavaScript库，它利用HTML5拖放API允许实现拖放式重新排序，并在现代浏览器和触摸设备中对项目进行排序。该库易于使用，并为大多数流行的JavaScript框架提供了支持，例如React，Vue.js和Angular。
与其他特定于反应的库不同，您可以使用SortableJS使用Vanilla JavaScript和HTML/CSS或任何支持的框架来创建拖放列表。还有很多基本功能，包括排序，延迟，切换，进行多个拖放选择和反转。
除了支持现代浏览器外，SortableJS还为非HTML5浏览器提供了后备功能。支持鼠标和触摸输入，以及拖动手柄选择和可选文本。它还支持流畅的CSS动画，CSS转换以及大多数CSS库，例如Bootstrap和Tailwind CSS。
图书馆在NPM上每周下载超过100万，并且在Github上有25,400颗星。可以在其GitHub page上找到如何使用sortablej的示例。
德拉格拉
使用Dragula，对任何其他框架都不依赖。这是一个易于使用的拖放库，支持Vanilla JavaScript和现代框架，例如Angular and React，并且与包括Internet Explorer 7+ (IE7+)在内的所有现代浏览器兼容。
。Dragula具有用于拖动元件的拖动手柄，只有在持有手柄时才启动拖动事件。物品的拖动优雅地处理，阴影可提供有关将项目删除位置的视觉反馈，并自动确定排序顺序。此外，当拖动按钮在定义的时间内发布时，还有一个快速删除功能。
借助您将在拖放库中寻找的大多数功能，dragula库易于使用，而drake组件是主要功能。此Drake Element负责管理一组注册容器的拖放活动。然后可以将容器元件的子女移动到这些容器内部或之间。在拖放操作期间，德雷克（Drake）处理了许多事件。其中最重要的是Drop，它在删除项目并提供DOM元素时调用回调。
图书馆也是开源的，并由一些贡献者维护，每周下载超过200,000个，在Github上下载21,000颗星。您可以在此GitHub repo上找到有关Dragula的更多信息。
结论
当今许多Web和移动应用程序都希望确保出色的用户体验。具有拖放功能有助于通过使用户的任务更加轻松，更高效来改善用户体验。如果您想提供此功能，可以使用已经过彻底测试的拖放库节省很多时间。
在本文中，您了解了一些最好，最有用的拖放库及其关键功能，因此您可以为应用程序选择合适的库。
如果您发现这篇文章有帮助，则应查看Bryntum，这是一套世界一流的Web UI组件，用于任务管理，以帮助全世界保持按计划。它的产品定期包括功能强大的拖放功能，例如任务板，可自定义日历和调度程序。