Column-level drag handle to move multi-cell columns as a unit

[harshtandiya]

Context

The form builder supports stacking multiple fields vertically inside a column (cells). Currently only individual cells can be dragged. To move a whole multi-cell column to another row or position, the user has to drag each cell separately.

Proposal

Add a column-level drag handle (e.g. a thin grab area on the column's left edge or a header icon visible on hover) that moves the entire column — all its cells preserve their order — as a single unit.

Implementation sketch

• New component: frontend/src/components/builder/ColumnHandle.vue — visible only on column hover, used as the column's drag handle.
• Wrap each column's <draggableComponent> in an outer column container that is itself draggable at the row level, with the new handle as handle.
• Store action: moveColumn(rowIdx, colIdx, targetRow, targetCol) — relocates all cells in (rowIdx, colIdx) to (targetRow, targetCol), then compact().
• Cell-level drag (existing behavior) stays unchanged; column-level drag is opt-in via the dedicated handle.

References

• frontend/src/components/FormBuilderContent.vue — current row → column → cell structure
• frontend/src/stores/editForm.ts — compact, insertCell, moveField