您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)react-beautiful-dnd如何實(shí)現(xiàn)組件拖拽,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在已有react項(xiàng)目中 執(zhí)行以下命令 so easy。
# yarn yarn add react-beautiful-dnd # npm npm install react-beautiful-dnd --save
詳情查看 官方文檔。
3.1 demo1 縱向組件拖拽
效果下圖:
demo1.gif
實(shí)現(xiàn)代碼:
import React, { Component } from "react"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; //初始化數(shù)據(jù) const getItems = count => Array.from({ length: count }, (v, k) => k).map(k => ({ id: `item-${k + 1}`, content: `this is content ${k + 1}` })); // 重新記錄數(shù)組順序 const reorder = (list, startIndex, endIndex) => { const result = Array.from(list); const [removed] = result.splice(startIndex, 1); result.splice(endIndex, 0, removed); return result; }; const grid = 8; // 設(shè)置樣式 const getItemStyle = (isDragging, draggableStyle) => ({ // some basic styles to make the items look a bit nicer userSelect: "none", padding: grid * 2, margin: `0 0 ${grid}px 0`, // 拖拽的時(shí)候背景變化 background: isDragging ? "lightgreen" : "#ffffff", // styles we need to apply on draggables ...draggableStyle }); const getListStyle = () => ({ background: 'black', padding: grid, width: 250 }); export default class ReactBeautifulDnd extends Component { constructor(props) { super(props); this.state = { items: getItems(11) }; this.onDragEnd = this.onDragEnd.bind(this); } onDragEnd(result) { if (!result.destination) { return; } const items = reorder( this.state.items, result.source.index, result.destination.index ); this.setState({ items }); } render() { return ( <DragDropContext onDragEnd={this.onDragEnd}> <center> <Droppable droppableId="droppable"> {(provided, snapshot) => ( <div //provided.droppableProps應(yīng)用的相同元素. {...provided.droppableProps} // 為了使 droppable 能夠正常工作必須 綁定到最高可能的DOM節(jié)點(diǎn)中provided.innerRef. 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> </center> </DragDropContext> ); } }
3.2 demo2 水平拖拽
效果下圖:
demo2.gif
實(shí)現(xiàn)代碼: 其實(shí)和縱向拖拽差不多 Droppable 中 多添加了一個(gè)排列順序的屬性,direction="horizontal"
import React, { Component } from "react"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; const getItems = count => ( Array.from({ length: count }, (v, k) => k).map(k => ({ id: `item-${k + 1}`, content: `this is content ${k + 1}` })) ) // 重新記錄數(shù)組順序 const reorder = (list, startIndex, endIndex) => { const result = Array.from(list); //刪除并記錄 刪除元素 const [removed] = result.splice(startIndex, 1); //將原來(lái)的元素添加進(jìn)數(shù)組 result.splice(endIndex, 0, removed); return result; }; const grid = 8; // 設(shè)置樣式 const getItemStyle = (isDragging, draggableStyle) => ({ // some basic styles to make the items look a bit nicer userSelect: "none", padding: grid * 2, margin: `0 ${grid}px 0 0 `, // 拖拽的時(shí)候背景變化 background: isDragging ? "lightgreen" : "#ffffff", // styles we need to apply on draggables ...draggableStyle }); const getListStyle = () => ({ background: 'black', display: 'flex', padding: grid, overflow: 'auto', }); class ReactBeautifulDndHorizontal extends Component { constructor(props) { super(props); this.state = { items: getItems(10) }; this.onDragEnd = this.onDragEnd.bind(this); } onDragEnd(result) { if (!result.destination) { return; } const items = reorder( this.state.items, result.source.index, result.destination.index ); this.setState({ items }); } render() { return ( <DragDropContext onDragEnd={this.onDragEnd}> <Droppable droppableId="droppable" direction="horizontal"> {(provided, snapshot) => ( <div {...provided.droppableProps} ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)} > {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> ) } } export default ReactBeautifulDndHorizontal
3.3 demo3實(shí)現(xiàn)一個(gè)代辦事項(xiàng)的拖拽(縱向 橫向拖拽)
關(guān)于“react-beautiful-dnd如何實(shí)現(xiàn)組件拖拽”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。