Horizontal and Vertical sorting when using draggabilly
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 4.3k
- Forks
- 324
- PR merge metrics
- No merged PRs in 30d
Description
I am working on an image grid where the user can drag and change the sort order of the images, The grid works fine, but when trying to reorder images in the same row, it pushed the image next to it in the row below it.
I see there is an option for "Horizontal : true", but that just changes the whole grid to one row.
Is there a way to get both horizontal and vertical working in the same grid?
Test case: https://codepen.io/amyth91/pen/xaeXyQ
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodePen test case and inspect how Packery and Draggabilly handle reordering within a multi-row image grid. Reproduce the horizontal-versus-vertical behavior, then determine whether both directions can work together; done means same-row and cross-row dragging preserve the intended order without collapsing the grid into one row.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100