添加拖放功能
目标:实现拼图碎片的拖放逻辑。
- 为拖放开始、拖放经过和放下事件添加处理程序。
- 实现放下时交换拼图碎片的逻辑。
// src/components/PuzzleGame.js
const PuzzleGame = () => {
//...之前的代码
// 处理拖放开始事件
const handleDragStart = (e, position) => {
e.dataTransfer.setData("text/plain", position);
};
// 处理放下事件
const handleDrop = (e, position) => {
e.preventDefault();
const originalPosition = e.dataTransfer.getData("text");
// 在此处添加交换拼图碎片位置的逻辑
setPositions((prevPositions) => {
const newPos = [...prevPositions];
[newPos[originalPosition], newPos[position]] = [
newPos[position],
newPos[originalPosition]
];
return newPos;
});
};
// 通过阻止默认行为允许放下操作
const handleDragOver = (e) => {
e.preventDefault();
};
// 渲染添加了拖放处理程序的拼图碎片
};
// src/components/PuzzleGame.js
const PuzzleGame = () => {
//...之前的代码
return (
<div className="game-container">
<div className="reference-image">
<img src={imgUrl} alt="参考图像" />
</div>
<div className="puzzle-container">
{positions.map((pos, index) => {
const x = (pos % 4) * 100;
const y = Math.floor(pos / 4) * 100;
return (
<div
key={index}
className="puzzle-piece"
draggable
onDragStart={(e) => handleDragStart(e, index)}
onDrop={(e) => handleDrop(e, index)}
onDragOver={handleDragOver}
style={{
backgroundImage: `url('${imgUrl}')`,
backgroundPosition: `-${x}px -${y}px`
}}
/>
);
})}
</div>
</div>
);
};