Gridstack组件固定（Pin）功能实现求助：点击后置顶且禁拖拽

Got it, let's work through this GridStack sticky element issue together. I've implemented similar behavior before, so here's a step-by-step solution that meets all your requirements:

1. GridStack Initialization Setup #

First, make sure your GridStack instance is initialized with the right base config, and add variables to track fixed elements and their state:

// Initialize GridStack with your preferred column count
const grid = GridStack.init({
  column: 12, // Adjust this to match your grid's column setup
  acceptWidgets: '.grid-stack-item',
  // Add any other base config you need (e.g., rowHeight, margin)
});

// Track fixed elements and set a high z-index to keep them on top
const fixedElements = [];
const FIXED_Z_INDEX = 100;

2. Bind Click Event to Toggle Sticky State #

Add a click handler to every grid item to switch between fixed and non-fixed states. We'll use a CSS class to mark fixed elements for styling and state checks:

// Attach click event to all grid items
document.querySelectorAll('.grid-stack-item').forEach(item => {
  item.addEventListener('click', function() {
    const isFixed = this.classList.contains('is-fixed');
    
    isFixed ? unfixElement(this) : fixElement(this);
  });
});

3. Implement Fix Element Logic #

This function handles moving the element to the top, disabling drag, and arranging fixed elements in left-to-right, top-to-bottom order:

function fixElement(element) {
  const widget = grid.getWidget(element);
  if (!widget) return;

  // Disable dragging/resizing and mark as fixed
  widget.disable();
  element.classList.add('is-fixed');
  element.style.zIndex = FIXED_Z_INDEX;

  const columnCount = grid.opts.column;
  let targetX = 0;
  let targetY = 0;

  // Calculate position for the new fixed element
  if (fixedElements.length > 0) {
    const lastFixed = fixedElements[fixedElements.length - 1];
    const lastWidget = grid.getWidget(lastFixed);
    
    // Check if we can fit the new element in the current row
    if (lastWidget.x + lastWidget.w < columnCount) {
      targetX = lastWidget.x + lastWidget.w;
      targetY = lastWidget.y;
    } else {
      // Move to the next row if current row is full
      targetX = 0;
      targetY = lastWidget.y + 1;
    }
  }

  // Update element position and add to fixed array
  widget.update(targetX, targetY, null, null, true);
  fixedElements.push(element);

  // Shift all non-fixed elements down to make space
  reorderNonFixedElements(targetY + 1);
}

4. Implement Unfix Element Logic #

When unfixing, restore drag functionality and reorder remaining elements to fill gaps:

function unfixElement(element) {
  const widget = grid.getWidget(element);
  if (!widget) return;

  // Re-enable dragging/resizing and remove fixed marker
  widget.enable();
  element.classList.remove('is-fixed');
  element.style.zIndex = '';

  // Remove from fixed elements array
  const index = fixedElements.indexOf(element);
  if (index !== -1) fixedElements.splice(index, 1);

  // Reorder remaining fixed elements and shift non-fixed elements up
  reorderFixedElements();
  const newStartY = fixedElements.length > 0 ? fixedElements[fixedElements.length - 1].y + 1 : 0;
  reorderNonFixedElements(newStartY);
}

5. Helper Functions for Reordering #

These functions ensure fixed elements stay ordered and non-fixed elements stay below them:

// Reorder fixed elements to fill any gaps (e.g., after unfixing an element)
function reorderFixedElements() {
  const columnCount = grid.opts.column;
  let currentX = 0;
  let currentY = 0;

  fixedElements.forEach(element => {
    const widget = grid.getWidget(element);
    if (!widget) return;

    // Move to next row if current row can't fit the element
    if (currentX + widget.w > columnCount) {
      currentX = 0;
      currentY += 1;
    }

    widget.update(currentX, currentY, null, null, true);
    currentX += widget.w;
  });
}

// Shift non-fixed elements down to start after the last fixed element
function reorderNonFixedElements(startY) {
  grid.getWidgets().forEach(widget => {
    const element = widget.el;
    if (!element.classList.contains('is-fixed') && widget.y < startY) {
      widget.update(null, startY + (widget.y - startY), null, null, true);
    }
  });
}

6. Optional CSS for Visual Feedback #

Add styling to make fixed elements easily distinguishable:

.is-fixed {
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

Quick Notes: #

• Adjust the column value in GridStack initialization to match your grid's actual column count.
• The true parameter in widget.update() enables smooth animation—remove it if you prefer instant position changes.
• This logic works for elements of any width; it will automatically wrap to the next row when the current row is full.

内容的提问来源于stack exchange，提问作者dev_ansh