react-draggable-ball

react-draggable-ball 拖拽控制小球

简介

• 有时候可能需要那种像手游一样的操作球来控制另一个物体的位置，所以我利用 react-draggable 封装起来做了个包。

• 控制的物体不一定要可拖动，不可拖动也可以的。

• https://yehuozhili.github.io/react-draggable-ball/

快速上手

• demo 中的示例为此示例

import React, { useState } from "react";
import Draggable, { DraggableEvent, DraggableData } from "react-draggable";
import { useGetBall } from "react-draggable-ball";
 
function App() {
    const [state, setState] = useState({ x: 0, y: 0 });
    const [render, isDrag, , position] = useGetBall(setState, {
        ratioSpeed: { x: 0.5, y: 0.5 },
    });
 
    return (
        <div className="App">
            <Draggable
                position={state}
                onStop={(e: DraggableEvent, data: DraggableData) => {
                    setState({ x: data.x, y: data.y });
                }}
            >
                <div
                    style={{
                        width: "100px",
                        height: "100px",
                        backgroundColor: "red",
                    }}
                ></div>
            </Draggable>
 
            <div
                style={{
                    width: "100px",
                    height: "100px",
                    backgroundColor: "blue",
                    position: "relative",
                    transform: `translate(${state.x}px,${state.y}px)`,
                }}
            ></div>
 
            <div>{isDrag}</div>
            <div>
                {state.x},{state.y}
            </div>
            <div>
                {position.x},{position.y}
            </div>
            {render}
        </div>
    );
}
 
export default App;

api

export interface IOptionsType {
    wrapperStyle?: CSSProperties; //这是外壳样式
    innerStyle?: CSSProperties; // 拖动的小球样式
    intervalDelay?: number; //interval延迟，越大，移动看起来越卡
    ratioSpeed?: IPositionState; //速度比率，用来控制state速度
    draggableProps?: Partial<DraggableProps>; //参考react-draggable属性
    innerContent?: ReactNode; //小球内容物，初始为null
}
export interface IPositionState {
    x: number;
    y: number;
}
//必传setState，用来控制
export function useGetBall(
    setState: React.Dispatch<React.SetStateAction<IPositionState>>,
    options?: IOptionsType
): [
    ReactNode, //这是渲染出来的拖拽小球
    boolean, //这是小球是否在拖拽状态
    React.Dispatch<React.SetStateAction<boolean>>, //这个可以改变是否拖拽状态
    IPositionState, //这是小球在壳里的位置
    React.Dispatch<React.SetStateAction<IPositionState>> //可以改变小球在壳里位置
];