metafizzy / metafizzy/packery

Save & restore dragged item positions

Open
#337 61 comments 9 reactions 1 assignee Claimed by @desandro View on GitHub
feature request
Dominant language
JavaScript
Stars
4.3k
Forks
324
PR merge metrics
No merged PRs in 30d

Description

First off, thank you very much for this library. It's awesome.

My use case for Packery is having a dashboard of widgets that users can drag and drop to re-arrange their order and layout. The order is persisted to a database. This works great for the most part, but there are cases where the layout changes after refreshing because the whitespace isn't preserved. For example, given the following:

![original layout](https://cloud.githubusercontent.com/assets/1157043/13223888/2759f736-d954-11e5-90f1-225250af8dec.png)

If a user moves widget 'c' to the right, like so:

![after dragging c to right](https://cloud.githubusercontent.com/assets/1157043/13223901/33ea4e60-d954-11e5-8d7a-a4b0cec0d283.png)

and then refreshes, widget 'c' ends up back on the left, because all that's persisted is the order and that doesn't actually change between the original layout and dragging 'c' to the right.

[Here is a reduced test case demonstrating this](http://codepen.io/chrisbreiding/pen/LGKgbM). Note that I don't expect the code in this test case to preserve the white space, but am wondering if there _is_ a way to persist the whitespace so that the widgets display in the same layout upon refreshing in which they are left after dragging and dropping.

I think that #179 might help with this, using `getItemElements` (or perhaps a new API that includes the dummy elements) to persist the order of the widgets interspersed with dummy elements. Or if there is a way to do this currently, please advise. Thank you!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.