script.js

const container = document.getElementById('todo-container');
let isDragging = false;
let startMouseX = 0;
let startMouseY = 0;
let startLeft = 0;
let startTop = 0;

// Position container absolutely initially
container.style.position = 'absolute';
container.style.top = container.offsetTop + 'px';
container.style.left = container.offsetLeft + 'px';

container.addEventListener('mousedown', (e) => {
  // Only drag if clicked on container background (not input, button, list)
  if (e.target.closest('input, button, label, li, ul')) return;

  isDragging = true;
  startMouseX = e.clientX;
  startMouseY = e.clientY;
  startLeft = container.offsetLeft;
  startTop = container.offsetTop;

  document.body.style.userSelect = 'none';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  let newLeft = startLeft + (e.clientX - startMouseX);
  let newTop = startTop + (e.clientY - startMouseY);

  // Constrain within viewport horizontally
  const maxLeft = window.innerWidth - container.offsetWidth;
  newLeft = Math.max(0, Math.min(newLeft, maxLeft));

  // Constrain vertically within page
  const maxTop = Math.max(document.body.scrollHeight - container.offsetHeight, 0);
  newTop = Math.max(0, Math.min(newTop, maxTop));

  container.style.left = newLeft + 'px';
  container.style.top = newTop + 'px';
});

document.addEventListener('mouseup', () => {
  if (isDragging) {
    isDragging = false;
    document.body.style.userSelect = 'auto';
  }
});