1.安装
yarn add react-beautiful-dnd
2.引入页面
import React, { useEffect, useState } from 'react';
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { reorderQuoteMap } from './renderNewList'
3.设置样式
/**
* css样式--- 每一行样式
*/
const getListStyle = (isDraggingOver: any) => ({
display: 'flex',
height: height52,
boxSizing: 'border-box',
});
const getItemStyle = (isDragging: any, draggableStyle: any) => ({
padding: borderWidth * 2,
boxSizing: 'border-box',
background: '#989898',
width: width220,
height: height45,
borderRadius: grid,
margin: `${margin2}px 0`,
// styles we need to apply on draggables需要在拖拽表上应用的样式
...draggableStyle,
});
4.ts
// 二维数组
const [isItemsArr, setIsItemsArr] = useState<{}>({
droppable1: [
{ id: 'lmy-0', content: 'hello-不能拖', color: 'yellow', dragAble: 'false' },
{ id: 'lmy-1', content: '六-不能拖', color: 'red', dragAble: 'false' },
{ id: 'lmy-2', content: '6', color: 'green' },
{ id: 'lmy-3', content: '大', color: 'blue' },
{ id: 'lmy-4', content: '白', color: 'white' },
{ id: 'lmy-5', content: '鹅', color: 'purple' },
]
,
droppable2: [
{ id: '66-0', content: '我-不能拖', color: 'red', dragAble: 'false' },
{ id: '66-1', content: '想-不能拖', color: 'red', dragAble: 'false' },
{ id: '66-2', content: '吃', color: 'red' },
{ id: '66-3', content: '火', color: 'red' },
{ id: '66-4', content: '锅', color: 'red' },
] })
const [isDragDisabled, setIsDragDisabled] = useState(false)
// 在拖动开始之前
const onBeforeDragStart = (result: any) => {
console.log('在拖动开始之前', result);
const dragAble: any = isItemsArr[result.source.droppableId][result.source.index].dragAble
if (dragAble) {
console.log('不能拖');
setIsDragDisabled(true)
} else {
console.log('能拖能拖能拖能拖');
setIsDragDisabled(false)
}
}
// 在拖动结束时
const onDragEnd = (result: any) => {
console.log('拖动结束时result-lmy', result, '-------', isItemsArr["droppable0"].length)
// dropped outside the list//被排除在名单之外
if (!result.destination) {
return;
}
//判断能不能放到这个位置
const isLast = isItemsArr[result.destination.droppableId]
console.log('是不是最后一个元素', isLast[result.destination.index])
if (isLast[result.destination.index]) {
const hasDragAble = isItemsArr[result.destination.droppableId][result.destination.index]
if (hasDragAble.dragAble) {
console.log('不能放');
return;
}
}
const items = reorderQuoteMap(
isItemsArr,
result.source,
result.destination
);
setIsItemsArr(items)
console.log('items', items)
}
5.页面搭建
<div className="lmy">
<DragDropContext onDragEnd={onDragEnd} onBeforeDragStart={onBeforeDragStart}>
{/* 内容数据 */}
<div className="hsc-lmy">
{/* 每一行内容 */}
<div className="column-lmy">
<Droppable droppableId="droppable1" direction="horizontal">
{(provided: any, snapshot: any) => (
<div
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
{...provided.droppableProps}
>
{(isItemsArr['droppable1']).map((item: any, index: any) => (
<Draggable
isDragDisabled={item.dragAble ? true : false}
key={item.id} draggableId={item.id} index={index}>
{(provided: any, snapshot: any) => (
<div
className='lmy-item'
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{item.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</div>
<div className="column-lmy">
<Droppable droppableId="droppable2" direction="horizontal">
{(provided: any, snapshot: any) => (
<div
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
{...provided.droppableProps}
>
{isItemsArr['droppable2'].map((item: any, index: any) => (
<Draggable
isDragDisabled={item.dragAble ? true : false}
key={item.id} draggableId={item.id} index={index}>
{(provided: any, snapshot: any) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}>
{item.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</div>
</div>
</DragDropContext>
</div>
我这个小demo只是最初版,优化啥的我就不放了,涉及到项目隐私。