const draggable = document.getElementById('draggable');
const resizer = document.querySelector('.resizer');

let isDragging = false;
let isResizing = false;
let initialX, initialY, initialWidth, initialHeight;

// 拖动功能
draggable.addEventListener('mousedown', (e) => {
    isDragging = true;
    initialX = e.clientX - draggable.offsetLeft;
    initialY = e.clientY - draggable.offsetTop;
});

document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        const newX = e.clientX - initialX;
        const newY = e.clientY - initialY;
        draggable.style.left = `${newX}px`;
        draggable.style.top = `${newY}px`;
    }

    if (isResizing) {
        const newWidth = e.clientX - (draggable.offsetLeft + initialWidth);
        const newHeight = e.clientY - (draggable.offsetTop + initialHeight);
        draggable.style.width = `${newWidth}px`;
        draggable.style.height = `${newHeight}px`;
    }
});

document.addEventListener('mouseup', () => {
    isDragging = false;
    isResizing = false;
});

// 调整大小功能
resizer.addEventListener('mousedown', (e) => {
    isResizing = true;
    initialWidth = draggable.offsetWidth - (e.clientX - draggable.offsetLeft);
    initialHeight = draggable.offsetHeight - (e.clientY - draggable.offsetTop);
});