js拼图

// 确保每个拼图块都有唯一的ID，并且正确绑定了拖拽和放置事件
document.querySelectorAll('.puzzle-piece').forEach(piece => {
    piece.addEventListener('dragstart', handleDragStart);
    piece.addEventListener('dragover', handleDragOver);
    piece.addEventListener('drop', handleDrop);
});

function handleDragStart(e) {
    e.dataTransfer.setData("text/plain", this.id);
}

function handleDragOver(e) {
    e.preventDefault();
}

function handleDrop(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData("text/plain");
    const draggedPiece = document.getElementById(data);
    const dropTarget = e.target;
    // 交换两个元素的位置
    const temp = document.createElement('div');
    dropTarget.parentNode.insertBefore(temp, dropTarget);
    draggedPiece.parentNode.insertBefore(dropTarget, draggedPiece);
    temp.parentNode.insertBefore(draggedPiece, temp);
    temp.parentNode.removeChild(temp);
}

function checkCompletion() {
    const pieces = document.querySelectorAll('.puzzle-piece');
    let isCompleted = true;
    pieces.forEach(piece => {
        const correctPosition = piece.dataset.position;
        if (piece.style.order !== correctPosition) {
            isCompleted = false;
        }
    });
    return isCompleted;
}