如何在字符指针数组中为每个单词保留一个指针？

Hey there! I’ve totally been where you are—spending hours scrolling through forums and tutorials, looking for a clear implementation that matches exactly what you need, only to hit dead ends. Since you mentioned the title outlines the problem, I’ll assume we’re tackling a super common pain point: building draggable table column sorting (feel free to tweak this if your specific use case is different!)

This solution is lightweight, works across modern browsers, and gives you full control over the behavior.

1. Set Up the HTML Structure #

We’ll add a draggable attribute to each table header and include a visual drag handle for better UX:

<table class="sortable-table">
  <thead>
    <tr>
      <th draggable="true" class="table-header">
        <span class="drag-handle">☰</span> Full Name
      </th>
      <th draggable="true" class="table-header">
        <span class="drag-handle">☰</span> Email Address
      </th>
      <th draggable="true" class="table-header">
        <span class="drag-handle">☰</span> User Role
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td>Editor</td>
    </tr>
  </tbody>
</table>

2. Add CSS for Visual Feedback #

Style the table to make drag actions obvious and improve usability:

.sortable-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

.table-header {
  position: relative;
  padding: 12px 15px;
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  cursor: grab;
  transition: all 0.2s ease;
}

.drag-handle {
  margin-right: 8px;
  opacity: 0.6;
}

.table-header.dragging {
  opacity: 0.5;
  cursor: grabbing;
  background-color: #e9ecef;
}

.table-header.drag-over {
  border-left: 4px solid #007bff;
}

.sortable-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #dee2e6;
}

3. Implement the JavaScript Logic #

This handles drag events, tracks the dragged column, and reorders both headers and body cells:

const headers = document.querySelectorAll('.table-header');
let draggedHeader = null;

// Attach drag event listeners to each header
headers.forEach(header => {
  header.addEventListener('dragstart', dragStart);
  header.addEventListener('dragover', dragOver);
  header.addEventListener('drop', drop);
  header.addEventListener('dragend', dragEnd);
});

function dragStart(e) {
  draggedHeader = this;
  this.classList.add('dragging');
  // Add data transfer for cross-browser compatibility
  e.dataTransfer.setData('text/plain', this.textContent.trim());
}

function dragOver(e) {
  e.preventDefault(); // Required to allow drop
  const draggingEl = document.querySelector('.dragging');
  if (this !== draggingEl) {
    this.classList.add('drag-over');
  }
}

function drop(e) {
  e.preventDefault();
  this.classList.remove('drag-over');
  
  // Get indices of dragged and target headers
  const headersArray = Array.from(headers);
  const draggedIndex = headersArray.indexOf(draggedHeader);
  const targetIndex = headersArray.indexOf(this);
  
  // Reorder the header cells in the DOM
  if (draggedIndex < targetIndex) {
    this.parentNode.insertBefore(draggedHeader, this.nextSibling);
  } else {
    this.parentNode.insertBefore(draggedHeader, this);
  }
  
  // Reorder corresponding tbody cells to match header order
  const rows = document.querySelectorAll('.sortable-table tbody tr');
  rows.forEach(row => {
    const cells = Array.from(row.children);
    const draggedCell = cells[draggedIndex];
    // Remove and reinsert the cell at the target index
    cells.splice(draggedIndex, 1);
    cells.splice(targetIndex, 0, draggedCell);
    row.innerHTML = '';
    cells.forEach(cell => row.appendChild(cell));
  });
}

function dragEnd() {
  this.classList.remove('dragging');
  // Clean up all drag-over states
  headers.forEach(header => header.classList.remove('drag-over'));
  draggedHeader = null;
}

Quick Customization Tips #

• Framework Adaptation: If you’re using React/Vue/Svelte, replace direct DOM manipulation with state management (e.g., track column order in state and render cells dynamically).
• Mobile Support: Add touch event listeners (touchstart, touchmove, touchend) to make this work on mobile devices.
• Performance: For large tables, debounce the reorder logic or use virtualization libraries to avoid lag.

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