有可能旋转一个具有反拖动功能的元素吗

Question

我在<Draggable>标签中有一个组件包装，但react draggable使用transform来移动元素，我想将元素向右或向左移动并旋转它。

const [deltaPosition, setDeltaPosition] = useState({x: 0, y: 0});
const handleDrag = (e, ui) => {
const { x, y } = deltaPosition;
setDeltaPosition({
x: x + ui.deltaX,
y: y + ui.deltaY,
});
};
<Draggable axis='x' onDrag={handleDrag}>
<Card style={{ transform: `rotate(${deltaPosition.x}deg)` }}>
...
</Card>
</Draggable>

Answer 1

我实现了旋转元素，我只需要将<Draggable>包装在其他标签(例如<div>(中，并向其添加转换样式：

const [deltaPosition, setDeltaPosition] = useState({x: 0, y: 0});
const [rotation, setRotation] = useState(0);
const handleDrag = (e, ui) => {
const { x, y } = deltaPosition;
setDeltaPosition({
x: x + ui.deltaX,
y: y + ui.deltaY,
});
setRotation(rotation + ui.deltaX / 20);
};
<div style={{transform: `rotate(${rotation}deg)`}}>
<Draggable axis='x' onDrag={handleDrag}>
<Card>
...
</Card>
</Draggable>
</div>