安装
yarn add react-draggable
使用
import Draggable from 'react-draggable';
export default function TableModal() {
const [bounds, setBounds] = useState({
left: 0,
top: 0,
bottom: 0,
right: 0,
});
const draggleRef = useRef(null);
const onStart = (_event, uiData) => {
console.log('targetRect',_event, uiData)
console.log(_event, uiData)
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = draggleRef.current?.getBoundingClientRect();
console.log('targetRect',targetRect)
if (!targetRect) {
return;
}
setBounds({
left: -targetRect.left + uiData.x,
right: clientWidth - (targetRect.right - uiData.x),
top: -targetRect.top + uiData.y,
bottom: clientHeight - (targetRect.bottom - uiData.y),
});
};
return (
<Draggable
bounds={bounds}
onStart={(event, uiData) => onStart(event, uiData)}
>
<div ref={draggleRef}
className={s.wrapPlantPop}
>
// content
</div>
</Draggable>
)}