LO-064 [Intermediate]: Sequence Step Drag-and-Drop Reordering

[Kuldeeep18]

Description

Currently, to reorder sequence steps in the builder, users must manually change step order settings. We want to implement a smooth drag-and-drop feature to reorder campaign steps visually.

User & Contributor Value

• Contributors: Frontend list manipulations, drag-and-drop event APIs, and sync state updates.
• Users: Significantly improved campaign building experience.

Code Locations

• frontend/campaign-builder.html

Implementation Guide

1. Enable draggable="true" on campaign step cards.
2. Listen to drag-and-drop events (dragstart, dragover, drop). Reorder the steps array in memory based on where the card was dropped.
3. Re-render the editor steps layout and trigger a PATCH request to save the updated step_order values.

[manikanta-tamminana]

Hi @Kuldeep18,

I would like to work on this issue under GSSoC.

My approach would be:

• Enable drag-and-drop functionality on campaign step cards using the native HTML5 Drag and Drop API.
• Implement dragstart, dragover, and drop event handlers to support intuitive step reordering.
• Update the steps array in memory based on the drop position and re-render the campaign builder UI accordingly.
• Persist the new ordering by triggering a PATCH request to update the step_order values on the backend.
• Add visual feedback during dragging (highlighting drop targets and active cards) to improve the user experience.
• Thoroughly test edge cases such as dragging to the beginning/end of the sequence and rapid reordering actions.

This feature will greatly improve the campaign-building workflow by making step management faster and more intuitive. Could you please assign this issue to me?

Thank you! 🚀