// 获取所有可拖动元素
const draggableElements = document.querySelectorAll('.draggable');
let currentDraggedElement = null;

// 为每个可拖动元素添加事件监听器
draggableElements.forEach(element => {
    element.addEventListener('dragstart', dragStart);
    element.addEventListener('dragend', dragEnd);
});

function dragStart(e) {
    currentDraggedElement = this;
    e.dataTransfer.setData('text/plain', this.id);
    setTimeout(() => this.style.visibility = 'hidden', 0);
}

function dragEnd() {
    this.style.visibility = 'visible';
    currentDraggedElement = null;
}

// 放置区域的事件监听
const dropZone = document.getElementById('drop-zone');
dropZone.addEventListener('dragover', dragOver);
dropZone.addEventListener('drop', drop);

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

function drop(e) {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(id);
    
    // 获取鼠标位置
    const x = e.clientX;
    const y = e.clientY;
    
    // 检查是否与任何元素重叠
    let canDrop = true;
    draggableElements.forEach(element => {
        if (element !== draggedElement && isOverlapping(draggedElement, element, x, y)) {
            canDrop = false;
        }
    });
    
    if (canDrop) {
        // 设置新位置
        draggedElement.style.position = 'absolute';
        draggedElement.style.left = `${x - draggedElement.offsetWidth / 2}px`;
        draggedElement.style.top = `${y - draggedElement.offsetHeight / 2}px`;
    }
}

// 碰撞检测函数
function isOverlapping(draggedElement, otherElement, x, y) {
    const rect = otherElement.getBoundingClientRect();
    const draggedWidth = draggedElement.offsetWidth;
    const draggedHeight = draggedElement.offsetHeight;
    
    return (
        x < rect.right + draggedWidth / 2 &&
        x + draggedWidth / 2 > rect.left &&
        y < rect.bottom + draggedHeight / 2 &&
        y + draggedHeight / 2 > rect.top
    );
}

// 设置网格大小
const GRID_SIZE = 50;

function drop(e) {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(id);
    
    // 计算最近的网格位置
    const x = Math.round(e.clientX / GRID_SIZE) * GRID_SIZE;
    const y = Math.round(e.clientY / GRID_SIZE) * GRID_SIZE;
    
    // 检查网格位置是否被占用
    let positionOccupied = false;
    draggableElements.forEach(element => {
        if (element !== draggedElement) {
            const elementX = parseInt(element.style.left) || 0;
            const elementY = parseInt(element.style.top) || 0;
            
            if (Math.abs(elementX - x) < GRID_SIZE && Math.abs(elementY - y) < GRID_SIZE) {
                positionOccupied = true;
            }
        }
    });
    
    if (!positionOccupied) {
        draggedElement.style.position = 'absolute';
        draggedElement.style.left = `${x - draggedElement.offsetWidth / 2}px`;
        draggedElement.style.top = `${y - draggedElement.offsetHeight / 2}px`;
    }
}