前言:
现在我们对“js对list进行排序”可能比较关怀,看官们都需要学习一些“js对list进行排序”的相关知识。那么小编也在网摘上汇集了一些对于“js对list进行排序””的相关内容,希望各位老铁们能喜欢,咱们快快来学习一下吧!今天给小伙伴们分享一个超漂亮的React拖放列表组件ReactBeautifulDnd。
react-beautiful-dnd 基于React.js构建的拖拽排列组件,star高达21.1K+。提供强大美丽且丝滑般的拖放体验。
react-beautiful-dnd主要包含下面三个组件。
DragDropContext:用于包裹拖拽根组件,Draggable和Droppable都需要包裹在DragDropContext内;Droppable:用于包裹你需要拖动的组件,使组件能够被拖拽;Draggable:用于接收拖拽元素的组件,使组件能够放置;安装
$ npm i react-beautiful-dnd -S快速使用
import React from 'react';import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";// 设置样式const getItemStyle = (isDragging, draggableStyle) => ({ userSelect: "none", padding: grid * 2, margin: `0 0 ${grid}px 0`, // 拖拽的时候背景变化 background: isDragging ? "lightgreen" : "#ffffff", // styles we need to apply on draggables ...draggableStyle}); const getListStyle = () => ({ background: 'black', padding: grid, width: 250});class App extends React.Component { constructor(props){ super(props); this.state = { items: [ {id: 'item-01', content: 'this is content'}, {id: 'item-02', content: 'this is content'}, {id: 'item-03', content: 'this is content'}, {id: 'item-04', content: 'this is content'}, {id: 'item-05', content: 'this is content'}, {id: 'item-06', content: 'this is content'}, {id: 'item-07', content: 'this is content'}, {id: 'item-08', content: 'this is content'}, {id: 'item-09', content: 'this is content'}, {id: 'item-10', content: 'this is content'}, ] } } onBeforeCapture = () => { /*...*/ }; onBeforeDragStart = () => { /*...*/ }; onDragStart = () => { /*...*/ }; onDragUpdate = () => { /*...*/ }; onDragEnd = () => { // the only one that is required }; render() { return ( <DragDropContext onBeforeCapture={this.onBeforeCapture} onBeforeDragStart={this.onBeforeDragStart} onDragStart={this.onDragStart} onDragUpdate={this.onDragUpdate} onDragEnd={this.onDragEnd} > <div>Hello world</div> <Droppable droppableId="droppable"> {(provided, snapshot) => ( <div {...provided.droppableProps} ref={provided.innerRef} style={getListStyle(snapshot)} > {this.state.items.map((item, index) => ( <Draggable key={item.id} draggableId={item.id} index={index}> {(provided, snapshot) => ( <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} style={getItemStyle( snapshot.isDragging, provided.draggableProps.style )} > {item.content} </div> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> ); }}
支持水平、垂直及混合拖拽效果。
另外还支持大数据、延迟及固定列表拖拽,拥有一样的流畅顺滑效果。
提供了丰富的文档及API示例代码。
附上项目示例及地址链接。
# 示例地址 仓库地址
ok,今天就分享到这里。感兴趣的话可以去看下,希望对大家有所帮助!
标签: #js对list进行排序 #js移动端拖拽 #拖动js #拖拽js库 #js拖拽布局