Hey there! I totally get what you're going for—an OBS-style custom homepage where users can add/remove panels and drag their edges to resize them is such a practical, user-friendly idea. Generic responsive design tutorials won't cut it here, so let's break down exactly how to build this step by step.

1. Build Draggable, Resizable Panel Components #

Each panel needs two key interactions: dragging the entire panel around, and resizing it by dragging its edges. Here's how to tackle both with vanilla JS (no heavy frameworks required):

Panel Structure (HTML/CSS) #

Start with a basic panel template. We'll add a draggable header, content area, and a resize handle (usually the bottom-right corner):

<div class="panel" style="left: 50px; top: 50px;">
  <div class="panel-header">
    My Custom Panel
    <button class="close-btn">×</button>
  </div>
  <div class="panel-content">Your content goes here!</div>
  <div class="resize-handle"></div>
</div>

.panel {
  position: absolute;
  width: 300px;
  height: 200px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1;
}
.panel-header {
  padding: 8px 12px;
  background: #f8f9fa;
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #666;
}
.panel-content {
  padding: 12px;
  height: calc(100% - 40px);
  overflow-y: auto;
}
.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: #eee;
  cursor: nwse-resize;
  border-top-left-radius: 4px;
}

Dragging the Panel (Vanilla JS) #

Add logic to let users drag the panel via its header:

const initPanelDrag = (panel) => {
  const header = panel.querySelector('.panel-header');
  let isDragging = false;
  let startX, startY, initialPanelX, initialPanelY;

  header.addEventListener('mousedown', (e) => {
    isDragging = true;
    // Capture initial positions
    startX = e.clientX;
    startY = e.clientY;
    initialPanelX = parseInt(window.getComputedStyle(panel).left);
    initialPanelY = parseInt(window.getComputedStyle(panel).top);
    // Bring panel to front while dragging
    panel.style.zIndex = 1000;
  });

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    // Calculate offset and update panel position
    const offsetX = e.clientX - startX;
    const offsetY = e.clientY - startY;
    panel.style.left = `${initialPanelX + offsetX}px`;
    panel.style.top = `${initialPanelY + offsetY}px`;
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
    panel.style.zIndex = 1;
  });
};

Resizing the Panel (Vanilla JS) #

Add logic to let users resize via the bottom-right handle:

const initPanelResize = (panel) => {
  const handle = panel.querySelector('.resize-handle');
  let isResizing = false;
  let startX, startY, initialWidth, initialHeight;

  handle.addEventListener('mousedown', (e) => {
    isResizing = true;
    startX = e.clientX;
    startY = e.clientY;
    initialWidth = parseInt(window.getComputedStyle(panel).width);
    initialHeight = parseInt(window.getComputedStyle(panel).height);
  });

  document.addEventListener('mousemove', (e) => {
    if (!isResizing) return;
    // Calculate new dimensions with minimum size limits
    const newWidth = Math.max(200, initialWidth + (e.clientX - startX));
    const newHeight = Math.max(150, initialHeight + (e.clientY - startY));
    panel.style.width = `${newWidth}px`;
    panel.style.height = `${newHeight}px`;
  });

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

2. Add/Remove Panel Functionality #

You'll need to track panel state (position, size, content) to manage adding/removing:

// Array to store panel state (for persistence later)
let panelState = [];

// Function to create a new panel
const createPanel = (position = { x: 50, y: 50 }, size = { w: 300, h: 200 }) => {
  const panel = document.createElement('div');
  panel.className = 'panel';
  panel.style.left = `${position.x}px`;
  panel.style.top = `${position.y}px`;
  panel.style.width = `${size.w}px`;
  panel.style.height = `${size.h}px`;
  panel.innerHTML = `
    <div class="panel-header">
      New Panel
      <button class="close-btn">×</button>
    </div>
    <div class="panel-content">Empty panel</div>
    <div class="resize-handle"></div>
  `;
  
  // Initialize interactions
  initPanelDrag(panel);
  initPanelResize(panel);
  
  // Add remove functionality
  panel.querySelector('.close-btn').addEventListener('click', () => {
    panel.remove();
    // Remove from state array
    panelState = panelState.filter(p => p.id !== panel.dataset.id);
    savePanelState();
  });
  
  // Assign unique ID and save state
  const panelId = `panel-${Date.now()}`;
  panel.dataset.id = panelId;
  panelState.push({ id: panelId, position, size });
  savePanelState();
  
  document.body.appendChild(panel);
};

// Save state to localStorage (so panels persist on refresh)
const savePanelState = () => {
  localStorage.setItem('customHomepanels', JSON.stringify(panelState));
};

// Load state on page load
const loadPanelState = () => {
  const savedState = localStorage.getItem('customHomepanels');
  if (savedState) {
    panelState = JSON.parse(savedState);
    panelState.forEach(panel => {
      createPanel(panel.position, panel.size);
    });
  }
};

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
  loadPanelState();
  // Add a button to create new panels
  document.querySelector('#add-panel-btn').addEventListener('click', createPanel);
});

3. Key Optimizations & Pitfalls to Avoid #

• Viewport Boundaries: Add checks to prevent panels from being dragged/resized outside the window (e.g., panel.style.left = Math.max(0, ...)).
• Performance: Wrap mousemove updates in requestAnimationFrame to avoid jank:

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    requestAnimationFrame(() => {
      const offsetX = e.clientX - startX;
      const offsetY = e.clientY - startY;
      panel.style.left = `${initialPanelX + offsetX}px`;
      panel.style.top = `${initialPanelY + offsetY}px`;
    });
  });
  

• Mobile Support: Add touch event listeners (touchstart, touchmove, touchend) alongside mouse events for mobile compatibility.
• Z-Index Management: Ensure the currently dragged panel stays on top of others (we already do this with zIndex in the drag logic).

4. Libraries to Simplify Development #

If you don't want to build everything from scratch, these libraries handle the heavy lifting:

• interact.js: A lightweight library dedicated to drag-and-drop, resizing, and gesture interactions. It supports both desktop and mobile out of the box.
• SortableJS: Great for managing panel order, and can be combined with resizing logic for a full OBS-like experience.
• React DnD / Vue Draggable: If you're using a framework like React or Vue, these framework-specific libraries simplify integration.

Start small—get a single draggable/resizable panel working first, then add the add/remove functionality, then state persistence. You'll have your OBS-style homepage up and running in no time!

内容的提问来源于stack exchange，提问作者Sakura De Francesco