Research

We are going to loop at a couple of applications to compare there drag and drop functionality and what libraries fit out needs the most:

Photohop (CC), Unity (2019)

Tab Reordering

• tab-reordering
• u-tab-reordering

This provides easy to use drag and drop off tabs. Some nice to haves are:

• Overflows hidden
• Placeholders full with of item
• Container constrains (left)

Tab Group Reordering

• [IMG] tag-group

This provides tab group dnd within a panel. Some nice to have's are:

• Panel height

Tab group to group

• [IMG] tag-group-to-group
• tab-group2group

Draging a tab from one group to another. Nice to have's are:

• Tab content rendering once outside the container.
• Whole tab group is highlighted

New Tab group creation

• [IMG] tag-group-creation
• panel-creation
• new-tab-group

New Tab groups (or panels) are created dragged on the side of panel's. Nice to have's:

• Drop area animated
• Width is consistant

New Window (w/ panel) created.

• [IMG] new-tab-group

New windows can created (or tabs can be detached). Nice to have

Dynamic panel snapping to sides (nice to have)

• [IMG] dynamic-panel-snaping

Window Snapping

• [IMG] snapping3

VSCode, Unity (2019)

Grid Layout

• grid-layout

Requirements:

Based on the above research this is what the requirements for the drag and drop is:

[] - Tab Reordering
[] - Tab Group Reordering
[] - Tab group to group
[] - New Tab group creation
[] - New Window (w/ panel) created.
[] - Dynamic panel snapping to sides
[] - Window Snapping