开源库-拖拽排序库-《前端知识进阶》

admin 2025-11-01 15:49:06 编程 来源:ZONE.CI 全球网 0 阅读模式
  • 1. React Beautiful Dnd
  • 2. Sortable
  • 3. Dragula
  • 4. React DnD
  • 5. Vue.Draggable
  • 6. interact.js
  • 7. React Draggable
  • 8. React Sortable Tree

    1. React Beautiful Dnd

    react-beautiful-dnd 是一款美观且简单易用的 React 列表拖拽库。其动画效果自然,性能优秀,简洁而强大的 API,易于上手,与标准浏览器的互动性非常好。www.yalijuda.com_53614150-efbed780-3c2c-11e9-9204-a5d2e746faca_0FMDodBQ2U.gifGithub(⭐️ 27.5k):https://github.com/atlassian/react-beautiful-dnd

    2. Sortable

    Sortable 是一个 JavaScript 拖拽库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。支持 Meteor、AngularJS、React、Polymer、Vue、Ember、Knockout 和任何 CSS 库。image.pngGithub(⭐️ 25.3k):https://github.com/SortableJS/Sortable

    3. Dragula

    Dragula 是一个 JavaScript 库,实现了网页上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。image.pngGithub(⭐️ 21.3k):https://github.com/bevacqua/dragula

    4. React DnD

    React DnD是 React 和 Redux 核心作者 Dan Abramov 创造的一组React 高阶组件,可帮助我们构建复杂的拖放界面,同时保持组件解耦。它可以在应用程序的不同部分之间通过拖动传输数据,并且组件会更改其外观和应用状态以响应拖放事件。image.pngGithub(⭐️ 18k):https://github.com/react-dnd/react-dnd

    5. Vue.Draggable

    Vue.Draggable 是基于 Sortable.js 的 Vue 拖放组件。它允许拖放和视图模型数组同步,基于并提供 Sortable.js 的所有功能。该库适用于Vue 2,如果想在 Vue 3 中使用该库,可以访问:https://github.com/SortableJS/vue.draggable.next。example.gifGithub(⭐️ 17.7k):https://github.com/SortableJS/Vue.Draggable

    6. interact.js

    interact.js 是一个适用于现代浏览器的 JavaScript 拖放库,支持调整大小和多点触控手势,具有惯性和捕捉功能。为了尽可能多地提供控制,它尝试提供一个简单、灵活的API,该 API 提供移动元素所需的所有拖拽API。image.pngGithub(⭐️ 11k):https://github.com/taye/interact.js

    7. React Draggable

    React-Draggable 库简单易用,将 CSS 中的transform应用于 React 组件,允许我们在 UI 中拖动组件。它有不同的 props 可以让你改变组件的行为,是创建直观、用户友好界面的绝佳选择。www.yalijuda.com_95649276-f3a02480-0b06-11eb-8504-e0614a780ba4_dtXV074UKO.gifGithub(⭐️ 7.7k):https://github.com/react-grid-layout/react-draggable

    8. React Sortable Tree

    React Sortable Tree 是一个用于对分层数据进行拖放式可排序表示的React组件。它支持单选多选,鼠标拖拽子集到新合集,模糊搜索等。2be8261c-913a-11e6-9508-4b347ae114b4.gifGithub(⭐️ 4.5k):https://github.com/frontend-collective/react-sortable-tree

    以太坊cppgolang区别 编程

    以太坊cppgolang区别

    以太坊是一种去中心化的开源平台,它采用智能合约技术,旨在构建和运行不受干扰的分布式应用程序。作为目前最受欢迎的区块链平台之一,以太坊提供了多种编程语言的支持,其
    progolang 编程

    progolang

    Go语言(Golang)是由Google开发的一门静态类型编程语言。作为一名专业的Golang开发者,我深知这门语言的优势和特点。在本文中,我将介绍Golang
    golangn个发送者 编程

    golangn个发送者

    Golang是一种开源的编程语言,由Google团队开发,旨在提高程序的并发性和简化软件开发过程。在Go语言中,有时需要向多个接收者发送信息。本文将介绍如何在G
    golang技能图谱 编程

    golang技能图谱

    从互联网行业的快速发展到人工智能技术的日益成熟,各种编程语言也应运而生。而在这众多的编程语言中,Golang(即Go)作为一门强大且高效的开发语言备受关注。Go
    评论:0   参与:  12