Dragster.js: Drag and Drop JS Library Examples

01 / MOVE + COPY

Editorial pipeline

Drag cards between the first two lanes. Items in the asset shelf create a copy when dropped into either lane.

1.1 Review headline setCopy desk

1.2 Choose cover imagePhoto edit

1.3 Confirm sourcesResearch

1.4 Prepare captionsPublishing

2.1 Fact-check completeApproved

2.2 Metadata addedApproved

2.3 Links verifiedApproved

2.4 Scheduled postTomorrow

3.1 Pull quoteReusable block

3.2 Newsletter CTAReusable block

3.3 Related readingReusable block

02 / NESTED BOARD

Campaign assembly

Move outer campaign cards between lanes. Inside the production bundle, rearrange tasks on its independent two-lane board.

4.1 Search briefingCampaign

4.2 Launch outlineCampaign

4.3 Audience notesCampaign

4.4 Legal reviewCampaign

5.1 Audience reportCampaign

5.2 Production bundleIndependent task board

6.1Crop art

6.2Write intro

6.3Tag links

6.4Run checks

7.1Set slug

7.2Add author

7.3Check alt text

7.4Preview

03 / POSITION SWAP

Priority exchange

Drop any item onto another card to exchange their places instead of inserting a new position.

8.1 Homepage refreshHigh

8.2 Publish interviewHigh

8.3 Archive updateMedium

8.4 Image creditsMedium

9.1 Seasonal guidePlanned

9.2 Topic clusterPlanned

04 / HANDLE ONLY

Protected editing

Cards move only when dragged by the dotted handle. Text areas remain safe for normal selection and inspection.

Glossary passIn progress

Citation auditIn progress

Accessibility scanComplete

05 / STABLE LANES

Fixed workspace

Reorder or transfer items while lane height stays fixed, keeping the workspace visually anchored during edits.

A1 Long-form draftCandidate

A2 Resource libraryCandidate

B1 Release checklistSelected