前言
这是一个便于开发者操作拖拽交互的库,感觉不错!它的官方文档贼难进去,这篇文章主要是把一些常用的内容记下,希望能帮助到大家。本篇文章参考的是16.0.1版本
npm i react-dnd
1、简单示例
1.1 useDrag:让DOM允许拖拽
import React from 'react'
import { useDrag } from 'react-dnd'
export default function Player() {
// 第一个返回值是一个对象,主要放一些拖拽物的状态。后面会介绍,先不管
// 第二个返回值:顾名思义就是一个Ref,只要将它注入到DOM中,该DOM就会变成一个可拖拽的DOM
const [_, dragRef] = useDrag({
type: 'Player', // 给拖拽物命名,后面用于分辨该拖拽物是谁,支持string和symbol
item: { id:1 }, // 拖拽物所携带的数据,让后面一些事件可以拿到数据,已达到交互的目的
},[])
// 由上面示例可知, useDrag所接收的参数一个是对象/函数 和一个依赖数组(可选)
// 注入Ref,现在这个DOM就可以拖拽了
return (
<div ref={dragRef}></div>
)
}
1.2 useDrop:让DOM作为拖放区域
import { useDrop } from 'react-dnd'
export const Dustbin = () => {
const [_, dropRef] = useDrop({
accept: ['Player'], // 指明该区域允许接收的拖放物。可以是单个,也可以是数组
// 里面的值就是useDrag所定义的type
// 当拖拽物在这个拖放区域放下时触发,这个item就是拖拽物的item(拖拽物携带的数据)
drop: (item) => {},
})
// 将ref注入进去,这个DOM就可以处理拖拽物了
return (
<div ref={dropRef} ></div>
)
}
1.3. 组合:让DOM作为拖拽物和拖放区域
import React, { useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
const Player=({onChangePosition,id})=>{
const ref = useRef(null);
// 1. 让DOM作为拖拽物,允许拖放
const [_, drag] = useDrag(() => ({
type: 'PLAYER',
item: { id:1 }
}));
// 2