react-beautiful-dnd高级拖拽 之 自建DEMO

1.安装

yarn add react-beautiful-dnd

2.引入页面

renderNewList.ts

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只是最初版，优化啥的我就不放了，涉及到项目隐私。