06 Drag and Drop

Drag and drop is handled using a dedicated element in FlexDivide.

  <div
    class="drag-stage"
    bind:this={dndContext.dragStage}
    class:horizontal-resize={transform.resize.type === "horizontal"}
    class:vertical-resize={transform.resize.type === "vertical"}
  />

Components related to drag and drop are added to this element and updated on mouse move.

A context, DNDContext in defined in FlexDivide which handles the drag and drop operations.

  type DNDContext = {
    dragStage: HTMLElement;
    drag: Writable<ActiveDrag>;
    dnd: ActiveDND;
    from: {};
    to: {};
    change(dnd = null, drag = null): void;
    reset();
    update();
  }

• dragStage - The stage element described above
• drag - Svelte Writable which updates UI based on change in drag status. See ActiveDrag for more details.
• dnd - States of different parameters that controls the drag and drop operation. See ActiveDND for more details.
• from - Details of the drag source. Tab, Pane or PaneGroup being dragged
• to - Details of the drop target. Pane or PaneGroup
• change - Update the changes in drag in Drag Context
• reset - Reset drag and drop
• update - Update the Workspace with drag and drop changes. ⠀ ⠀ ⠀

Next : Resizing