React App

21 | ); 22 | } 23 | 24 | function BoardSquare({ x, y, knightPosition, children, moveKnight }: any) { 25 | const black = (x + y) % 2 === 1; 26 | const [{ isOver, canDrop }, drop] = useDrop( 27 | () => ({ 28 | accept: ItemTypes.KNIGHT, 29 | drop: (item, monitor) => { 30 | moveKnight(x, y); 31 | }, 32 | canDrop: () => canMoveKnight(x, y, knightPosition), 33 | collect: (monitor) => ({ 34 | isOver: !!monitor.isOver(), 35 | canDrop: !!monitor.canDrop(), 36 | }), 37 | }), 38 | [x, y], 39 | ); 40 | 41 | return ( 42 |

50 | {children} 51 | {isOver && !canDrop && } 52 | {!isOver && canDrop && } 53 | {isOver && canDrop && } 54 |

55 | ); 56 | } 57 | 58 | export default BoardSquare; 59 | -------------------------------------------------------------------------------- /src/components/listSort/box.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DragSourceMonitor, useDrag } from 'react-dnd'; 3 | import ItemType from './type'; 4 | 5 | let id = 1; 6 | 7 | const Box = ({ bg, text, dropCardList, updateDragAndDrop }: any) => { 8 | const style: React.CSSProperties = { 9 | background: bg, 10 | }; 11 | 12 | const box = { 13 | bg, 14 | text, 15 | }; 16 | 17 | const [{ isDragging }, drag] = useDrag({ 18 | type: ItemType.Card, 19 | item() { 20 | //在拖动操作开始时触发 21 | const useless = dropCardList.find((item: any) => item.id === -1); 22 | // 拖拽开始时，向 cardList 数据源中插入一个占位的元素，如果占位元素已经存在，不再重复插入 23 | if (!useless) { 24 | updateDragAndDrop([{ bg: 'aqua', text: '放这里', id: -1 }, ...dropCardList]); 25 | } 26 | 27 | return box; 28 | }, 29 | end(_: unknown, monitor: DragSourceMonitor) { 30 | const uselessIndex = dropCardList.findIndex((item: any) => item.id === -1); 31 | 32 | /** 33 | * 拖拽结束时，判断是否将拖拽元素放入了目标接收组件中 34 | * 1、如果是，则使用真正传入的 box 元素代替占位元素 35 | * 2、如果否，则将占位元素删除 36 | */ 37 | 38 | if (monitor.didDrop()) { 39 | dropCardList.splice(uselessIndex, 1, { ...monitor.getItem(), id: id++ }); 40 | } else { 41 | dropCardList.splice(uselessIndex, 1); 42 | } 43 | // 更新 cardList 数据源 44 | updateDragAndDrop(dropCardList); 45 | }, 46 | collect: (monitor) => ({ 47 | isDragging: monitor.isDragging(), 48 | }), 49 | }); 50 | return ( 51 |

52 | {text} 53 |

54 | ); 55 | }; 56 | 57 | export default Box; 58 | -------------------------------------------------------------------------------- /src/components/cardSort/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DndProvider } from 'react-dnd'; 3 | import { HTML5Backend } from 'react-dnd-html5-backend'; 4 | import Card from './card'; 5 | import './index.scss'; 6 | 7 | const CARD_INIT_ARR = [ 8 | { 9 | id:0, 10 | text: '000', 11 | }, 12 | { 13 | id:1, 14 | text: '111', 15 | }, 16 | { 17 | id:2, 18 | text: '222', 19 | }, 20 | { 21 | id:3, 22 | text: '333', 23 | }, 24 | { 25 | id:4, 26 | text: '444', 27 | }, 28 | ]; 29 | 30 | class CardSort extends React.Component { 31 | constructor(props: any) { 32 | super(props); 33 | this.state = { 34 | cardList: [], 35 | }; 36 | this.changePosition = this.changePosition.bind(this); 37 | } 38 | 39 | componentDidMount() { 40 | this.setState({ cardList: CARD_INIT_ARR }); 41 | } 42 | 43 | changePosition(dragIndex: string | number, hoverIndex: string | number) { 44 | let data = this.state.cardList.slice(); 45 | let temp = data[dragIndex]; 46 | // 交换位置 47 | data[dragIndex] = data[hoverIndex]; 48 | data[hoverIndex] = temp; 49 | this.setState({ cardList: data }); 50 | } 51 | 52 | render() { 53 | return ( 54 | 55 |

56 |

预置卡片排序

57 |

58 | {this.state.cardList.map((each: any, index: any) => ( 59 | 60 | ))} 61 |

62 |

63 | 64 | ); 65 | } 66 | } 67 | 68 | export default CardSort; 69 | -------------------------------------------------------------------------------- /src/components/arbitrarilyDrag/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DndProvider } from 'react-dnd'; 3 | import { HTML5Backend } from 'react-dnd-html5-backend'; 4 | import Classification from './Classification'; 5 | import './index.scss'; 6 | import { WORD_TYPE } from './type'; 7 | import Word from './word'; 8 | 9 | const WORDS = [ 10 | { 11 | text: 'interesting', 12 | type: WORD_TYPE.adj, 13 | }, 14 | { 15 | text: 'interest', 16 | type: WORD_TYPE.verb, 17 | }, 18 | { 19 | text: 'forget', 20 | type: WORD_TYPE.verb, 21 | }, 22 | { 23 | text: 'interested', 24 | type: WORD_TYPE.adj, 25 | }, 26 | ]; 27 | 28 | const Classifications = [ 29 | { 30 | title: '形容词', 31 | type: WORD_TYPE.adj, 32 | }, 33 | { 34 | title: '动词', 35 | type: WORD_TYPE.verb, 36 | }, 37 | ]; 38 | 39 | class WordClassification extends React.Component { 40 | constructor(props: any) { 41 | super(props); 42 | this.state = {}; 43 | } 44 | 45 | render() { 46 | return ( 47 | 48 |

49 |

任意拖拽

50 |

51 | {Classifications.map((each, index) => ( 52 | 53 | ))} 54 |

55 | 56 |

57 | {WORDS.map((each, index) => { 58 | let newEach = { ...each, id: 'drag' + index }; 59 | return ; 60 | })} 61 |

62 |

63 | 64 | ); 65 | } 66 | } 67 | 68 | export default WordClassification; 69 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true 5 | }, 6 | "parser": "@typescript-eslint/parser", 7 | "parserOptions": { 8 | "project": "./tsconfig.json" 9 | }, 10 | "plugins": ["jest", "@typescript-eslint"], 11 | "extends": ["react-app", "react-app/jest", "plugin:prettier/recommended"],// 关闭prettier和eslint有冲突的规则，没有定义的规则以prettiew为准 12 | "rules": { 13 | "linebreak-style": [0, "error", "windows"], 14 | "@typescript-eslint/no-explicit-any": [0], 15 | "@typescript-eslint/no-empty-function": [0], 16 | "@typescript-eslint/no-empty-interface": [0], 17 | "@typescript-eslint/no-unused-vars": [0], 18 | "@typescript-eslint/no-use-before-define": [0], 19 | "@typescript-eslint/explicit-member-accessibility": [0], 20 | "@typescript-eslint/no-var-requires": [0], 21 | "@typescript-eslint/no-non-null-assertion": [0], 22 | "@typescript-eslint/explicit-function-return-type": [0], 23 | "@typescript-eslint/ban-ts-ignore": "off", 24 | "@typescript-eslint/no-this-alias": "off", 25 | "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 5 }], 26 | "camelcase": [0], 27 | "@typescript-eslint/camelcase": [0], 28 | "@typescript-eslint/ban-ts-comment": "off", 29 | "@typescript-eslint/function-paren-newline": "off", 30 | "nonblock-statement-body-position": "off", 31 | "dot-notation": [0, { "allowKeywords": true }], 32 | "arrow-parens": 0 33 | }, 34 | "overrides": [ 35 | { 36 | "files": ["*.ts", "*.tsx"], 37 | "rules": { 38 | "prefer-const": [0], 39 | "no-var": [2], 40 | "no-constant-condition": [0], 41 | "camelcase": [0], 42 | "@typescript-eslint/camelcase": [0], 43 | "function-paren-newline": "off" 44 | } 45 | } 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/dragPreviewDom/customDragerLayer.tsx: -------------------------------------------------------------------------------- 1 | import type { CSSProperties, FC } from 'react'; 2 | import type { XYCoord } from 'react-dnd'; 3 | import { useDragLayer } from 'react-dnd'; 4 | 5 | function snapToGrid(x: number, y: number): [number, number] { 6 | const snappedX = Math.round(x / 32) * 32; 7 | const snappedY = Math.round(y / 32) * 32; 8 | return [snappedX, snappedY]; 9 | } 10 | 11 | const layerStyles: CSSProperties = { 12 | position: 'fixed', 13 | pointerEvents: 'none', 14 | zIndex: 100, 15 | left: 0, 16 | top: 0, 17 | // width: '100%', 18 | // height: '100%', 19 | }; 20 | 21 | function getItemStyles( 22 | initialOffset: XYCoord | null, 23 | currentOffset: XYCoord | null, 24 | isSnapToGrid: boolean 25 | ) { 26 | if (!initialOffset || !currentOffset) { 27 | return { 28 | display: 'none', 29 | }; 30 | } 31 | 32 | let { x, y } = currentOffset; 33 | 34 | if (isSnapToGrid) { 35 | x -= initialOffset.x; 36 | y -= initialOffset.y; 37 | [x, y] = snapToGrid(x, y); 38 | x += initialOffset.x; 39 | y += initialOffset.y; 40 | } 41 | 42 | const transform = `translate(${x}px, ${y}px)`; 43 | return { 44 | transform, 45 | WebkitTransform: transform, 46 | }; 47 | } 48 | 49 | export const CustomDragLayer = (props: any) => { 50 | const { itemType, isDragging, item, initialOffset, currentOffset } = 51 | useDragLayer((monitor) => ({ 52 | item: monitor.getItem(), 53 | itemType: monitor.getItemType(), 54 | initialOffset: monitor.getInitialSourceClientOffset(), 55 | currentOffset: monitor.getSourceClientOffset(), 56 | isDragging: monitor.isDragging(), 57 | })); 58 | 59 | function renderItem() { 60 | switch (itemType) { 61 | case 'DragDropBox': 62 | return

这里是预览样式

; 63 | default: 64 | return null; 65 | } 66 | } 67 | 68 | if (!isDragging) { 69 | return null; 70 | } 71 | 72 | return ( 73 |

74 |

77 | {renderItem()} 78 |

79 |

80 | ); 81 | }; 82 | -------------------------------------------------------------------------------- /src/components/listSort/dropSquare.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from 'react'; 2 | import { useDrop } from 'react-dnd'; 3 | import Card from './card'; 4 | import ItemTypes from './type'; 5 | import update from 'immutability-helper'; 6 | export default function DropSquare({ dropCardList, updateDragAndDrop }: any) { 7 | const [{ canDrop }, drop] = useDrop({ 8 | accept: ItemTypes.Card, 9 | 10 | canDrop: (_item, monitor) => { 11 | return true; 12 | }, 13 | collect: (monitor) => ({ 14 | canDrop: !!monitor.canDrop(), 15 | }), 16 | }); 17 | 18 | const moveCard = useCallback( 19 | (dragIndex: number, hoverIndex: number) => { 20 | console.log('dragIndex',dragIndex,'hoverIndex',hoverIndex); 21 | 22 | /** 23 | * 1、如果此时拖拽的组件是 Box 组件，则 dragIndex 为 undefined，则此时修改，则此时修改 cardList 中的占位元素的位置即可 24 | * 2、如果此时拖拽的组件是 Card 组件，则 dragIndex 不为 undefined，此时替换 dragIndex 和 hoverIndex 位置的元素即可 25 | */ 26 | if (dragIndex === undefined) { 27 | const lessIndex = dropCardList.findIndex((item: any) => item.id === -1); 28 | updateDragAndDrop( 29 | update(dropCardList, { 30 | $splice: [ 31 | [lessIndex, 1], 32 | [hoverIndex, 0, { bg: 'aqua', category: '放这里', id: -1 }], 33 | ], 34 | }), 35 | ); 36 | } else { 37 | const dragCard = dropCardList[dragIndex]; 38 | updateDragAndDrop( 39 | update(dropCardList, { 40 | $splice: [ 41 | [dragIndex, 1], 42 | [hoverIndex, 0, dragCard], 43 | ], 44 | }), 45 | ); 46 | } 47 | // eslint-disable-next-line 48 | }, 49 | [dropCardList, updateDragAndDrop], 50 | ); 51 | 52 | return ( 53 |

54 | {dropCardList.length > 0 && 55 | dropCardList.map((each: any, index: number) => ( 56 | 64 | ))} 65 |

66 | ); 67 | } 68 | -------------------------------------------------------------------------------- /src/components/multiDrag/Drag.tsx: -------------------------------------------------------------------------------- 1 | import { relative } from 'path'; 2 | import { useEffect, useState } from 'react'; 3 | import { useDrag } from 'react-dnd'; 4 | import { getEmptyImage } from 'react-dnd-html5-backend'; 5 | 6 | const cardList = [ 7 | { 8 | id: 1, 9 | text: 'js', 10 | }, 11 | { 12 | id: 2, 13 | text: 'css', 14 | }, 15 | { 16 | id: 3, 17 | text: 'html', 18 | }, 19 | ]; 20 | 21 | const itemHeight = 48; 22 | 23 | const Drag = () => { 24 | let [selectList, setSelectList] = useState(cardList) as [any[], any]; 25 | let [isDragBegin, setisDragBegin] = useState(false); 26 | const [{ isDragging }, drag] = useDrag({ 27 | type: 'DragDropBox', 28 | item: () => { 29 | setisDragBegin(() => true); 30 | return {}; 31 | }, 32 | end: () => { 33 | if (isDragBegin) { 34 | setisDragBegin(() => false); 35 | } 36 | }, 37 | collect: (monitor) => { 38 | const isDragging = monitor.isDragging(); 39 | return { 40 | isDragging, 41 | }; 42 | }, 43 | }); 44 | 45 | const updateList = (each: any) => { 46 | let newSelectList: any[] = []; 47 | newSelectList = selectList.map((item) => { 48 | if (item.id === each.id) { 49 | if (selectList.filter((item) => item.id === each.id && item.selected).length > 0) { 50 | item.selected = false; 51 | } else { 52 | item.selected = true; 53 | } 54 | } 55 | return item; 56 | }); 57 | setSelectList(newSelectList); 58 | }; 59 | 60 | const isSelectItem = (id: any) => { 61 | return selectList 62 | .filter((item) => item.selected) 63 | .map((item) => item.id) 64 | .includes(id); 65 | }; 66 | 67 | return ( 68 |

69 |

70 | {cardList.map((each) => ( 71 |

72 | {each.text} 73 | updateList(each)} /> 74 |

75 | ))} 76 |

77 |

78 |

79 | {selectList.map((each) => ( 80 |

89 | {each.text} 90 | updateList(each)} /> 91 |

92 | ))} 93 |

94 |

95 |

96 | ); 97 | }; 98 | export default Drag; 99 | -------------------------------------------------------------------------------- /src/components/listSort/card.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * filename: Card 3 | * overview: 根据放入 Box 生成的 Card 组件 4 | */ 5 | 6 | import React, { useRef, useMemo } from 'react'; 7 | import { XYCoord } from 'dnd-core'; 8 | import { DragSourceMonitor, DropTargetMonitor, useDrag, useDrop } from 'react-dnd'; 9 | import ItemTypes from './type'; 10 | 11 | const Card = ({ bg, text, index, moveCard, id, updateDragAndDrop, dropCardList }: any) => { 12 | const ref = useRef(null); 13 | 14 | const [{ isDragging }, drag] = useDrag({ 15 | type: ItemTypes.Card, 16 | collect: (monitor: any) => ({ 17 | isDragging: monitor.getItem() ? index === monitor.getItem().index : false, // 直接用monitor.isDragging无法监控索引更改 18 | // isDragging: monitor.isDragging() 19 | }), 20 | // item 中包含 index 属性，则在 drop 组件 hover 和 drop 是可以根据第一个参数获取到 index 值 21 | item: { index, id }, 22 | 23 | end(item: any, monitor: DragSourceMonitor) { 24 | const idx = item.id; 25 | const uselessIndex = dropCardList.findIndex((item: any) => item.id === idx); 26 | 27 | /** 28 | * 监控是否将元素移出了列表 29 | */ 30 | if (!monitor.didDrop()) { 31 | dropCardList.splice(uselessIndex, 1); 32 | } 33 | // 更新 cardList 数据源 34 | updateDragAndDrop(dropCardList); 35 | }, 36 | }); 37 | 38 | const [, drop] = useDrop({ 39 | accept: ItemTypes.Card, 40 | hover(item: any, monitor: DropTargetMonitor) { 41 | if (!ref.current) { 42 | return; 43 | } 44 | const dragIndex = item.index; 45 | const hoverIndex = index; 46 | 47 | // 拖拽元素下标与鼠标悬浮元素下标一致时，不进行操作 48 | if (dragIndex === hoverIndex) { 49 | return; 50 | } 51 | 52 | // 确定屏幕上矩形范围 53 | const hoverBoundingRect = ref.current!.getBoundingClientRect(); 54 | 55 | // 获取中点垂直坐标 56 | const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; 57 | 58 | // 确定鼠标位置 59 | const clientOffset = monitor.getClientOffset(); 60 | 61 | // 获取距顶部距离 62 | const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top; 63 | 64 | /** 65 | * 只在鼠标越过一半物品高度时执行移动。 66 | * 67 | * 当向下拖动时，仅当光标低于50%时才移动。 68 | * 当向上拖动时，仅当光标在50%以上时才移动。 69 | * 70 | * 可以防止鼠标位于元素一半高度时元素抖动的状况 71 | */ 72 | 73 | // 向下拖动 74 | if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { 75 | return; 76 | } 77 | 78 | // 向上拖动 79 | if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { 80 | return; 81 | } 82 | 83 | // 执行 move 回调函数 84 | moveCard(dragIndex, hoverIndex); 85 | 86 | /** 87 | * 如果拖拽的组件为 Box，则 dragIndex 为 undefined，此时不对 item 的 index 进行修改 88 | * 如果拖拽的组件为 Card，则将 hoverIndex 赋值给 item 的 index 属性 89 | */ 90 | if (item.index !== undefined) { 91 | item.index = hoverIndex; 92 | } 93 | }, 94 | }); 95 | 96 | const style: React.CSSProperties = useMemo( 97 | () => ({ 98 | // Card 为占位元素是，透明度 0.4，拖拽状态时透明度 0.2，正常情况透明度为 1 99 | opacity: id === -1 ? 0.4 : isDragging ? 1 : 1, 100 | backgroundColor: bg, 101 | }), 102 | [bg, id, isDragging], 103 | ); 104 | 105 | /** 106 | * 使用 drag 和 drop 对 ref 进行包裹，则组件既可以进行拖拽也可以接收拖拽组件 107 | */ 108 | return ( 109 |

110 | {text} 111 |

112 | ); 113 | }; 114 | 115 | export default Card; 116 | -------------------------------------------------------------------------------- /src/components/cardAssemble/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DndProvider } from 'react-dnd'; 3 | import { HTML5Backend } from 'react-dnd-html5-backend'; 4 | import DragSquare from './dragSquare'; 5 | import DropSquare from './dropSquare'; 6 | import './index.scss'; 7 | 8 | const CARD_INIT_ARR = [ 9 | { 10 | id: 1, 11 | text: '她', 12 | }, 13 | { 14 | id: 2, 15 | text: '我的', 16 | }, 17 | { 18 | id: 3, 19 | text: '唯一', 20 | }, 21 | { 22 | id: 4, 23 | text: '是', 24 | }, 25 | { 26 | id: 5, 27 | text: '现在', 28 | }, 29 | ]; 30 | 31 | const INIT_DROP = { 32 | innerDrag: null, 33 | } as any; 34 | 35 | const INIT_DROP_LIST = new Array(5).fill(0).map((_item, index) => { 36 | return { ...INIT_DROP, id: index + 1 }; 37 | }); 38 | 39 | class CardSort extends React.Component { 40 | constructor(props: any) { 41 | super(props); 42 | this.state = { 43 | dragCardList: CARD_INIT_ARR, 44 | dropCardList: INIT_DROP_LIST, 45 | }; 46 | this.updateDragAndDrop = this.updateDragAndDrop.bind(this); 47 | } 48 | 49 | updateDragAndDrop(dragId: any, dropId?: any) { 50 | let { dragCardList, dropCardList } = this.state; 51 | let moveDragItem: any = null; 52 | if (!dropId) { 53 | if (dragCardList.length === 5) return; 54 | this.dragItemBack(dragId); 55 | } else { 56 | let beginDragId = -1; 57 | [moveDragItem, dragCardList] = this.removeDragItemById(dragId, dragCardList); 58 | 59 | if (!moveDragItem) { 60 | [moveDragItem, dropCardList, beginDragId] = this.removeDropItemById(dragId, dropCardList); 61 | } 62 | 63 | dropCardList = dropCardList.map((item: { id: any; innerDrag: any }, _index: any, arr: any) => { 64 | if (item.id === dropId) { 65 | if (item.innerDrag) { 66 | arr[beginDragId].innerDrag = item.innerDrag; 67 | } 68 | item.innerDrag = moveDragItem; 69 | } 70 | return item; 71 | }); 72 | this.setState({ dragCardList, dropCardList }); 73 | } 74 | } 75 | 76 | // 从drop列表将drag拖拽回去 77 | dragItemBack(dragId: number) { 78 | let { dragCardList, dropCardList } = this.state; 79 | let moveDragItem = null; 80 | [moveDragItem, dropCardList] = this.removeDropItemById(dragId, dropCardList); 81 | 82 | dragCardList.push(moveDragItem); 83 | dragCardList = dragCardList.sort((pre: any, next: any) => pre.id - next.id); 84 | this.setState({ dragCardList, dropCardList }); 85 | } 86 | 87 | // 根据id从drop列表中删除drop 88 | removeDropItemById(itemId: any, dropCardList: any) { 89 | let moveDragItem: any = null; 90 | let dropId = -1; 91 | let newDropCardList = dropCardList.map((item: { id: any; innerDrag: any }, index: number) => { 92 | if (item.innerDrag && item.innerDrag.id === itemId) { 93 | moveDragItem = item.innerDrag; 94 | dropId = index; 95 | item.innerDrag = null; 96 | } 97 | return item; 98 | }); 99 | return [moveDragItem, newDropCardList, dropId]; 100 | } 101 | 102 | // 根据id从drag列表中删除drag 103 | removeDragItemById(itemId: any, dragCardList: any) { 104 | let moveDragItem: any = null; 105 | dragCardList = dragCardList.filter((item: any) => { 106 | if (item.id === itemId) { 107 | moveDragItem = item; 108 | return false; 109 | } 110 | return true; 111 | }); 112 | return [moveDragItem, dragCardList]; 113 | } 114 | 115 | render() { 116 | const { dragCardList, dropCardList } = this.state; 117 | return ( 118 | 119 |

120 |

卡片拼图

121 | 122 | 123 |

124 | 125 | ); 126 | } 127 | } 128 | 129 | export default CardSort; 130 | --------------------------------------------------------------------------------

批量拖拽

拖拽图片预览

拖拽Dom预览

列表排序(数量无限，有顺移)

预置卡片排序

任意拖拽

卡片拼图