save (and reuse) different sort order after dragging

[metafizzy]

save (and reuse) different sort order after dragging

[desandro]

You can get the item elements in their order with .getItemElements() see http://packery.metafizzy.co/faq.html#order-after-drag If you wish to manipulate the items in their order, you can access them in pckry.items.

If you could provide a reduced test case I might be better enabled to answer your request. See Submitting Issues in the contributing guidelines.

[mgrn0]

I extended your demo here (http://codepen.io/magrolino/pen/upral) - it saves the values of the tabindex attribute to an array and saves the array to localStorage. I am stuck now loading at the page and trying to re-order the element array before applying the packery layout.. This would have been nice so end-user changes in the layout could be 'saved' on the enduser-side..

Edit: for some weird reason I cannot run the demo in firefox, nor in chrome with private browsing enabled the localStorage call seems to throw some issues with codePen / iFrames.. hope you can still see what I mean.

[desandro]

Thanks so much for the test case!

See my fork http://codepen.io/desandro/pen/wtafg

Here's what I'm doing

• Disable initial layout with isInitLayout: false
• If the sortOrder is available via localStorage, then edit pckry.items to match that order
• trigger pckry.layout()

Here's another version of it http://codepen.io/desandro/pen/cGhJt I'm adding a special custom method sortItems which accepts an array and a function in order to sort the items. It's all make-shift, but it works given your example

---

For others looking at this example: This is just one way to get it done. The take-away is, you can retrieve the items in order with getItemElements and then you can manipulate them in pckry.items. I can see how something like .sortItems() could be useful. Speak up if you're trying to do something similar and having trouble.

[mgrn0]

awesome, thanks so much for the answer/help!

[mfrosch]

Hallo desandro,

thanks for your help. But I got some ajax problems with
var container = document.querySelector('#container');

so I switched to jQuery now
var $container = $('#container');

But now i dont how to access the old pckry.items?
I can get the elements:
var elems = $container.packery('getItemElements');

But I cant set the reordered elements. Remove and adding results in problems.

You got a hint for me?

Thanks in advance!

Cheers,
Matthias

[desandro]

@mfrosch You can access the Packery instance with $container.data('packery').

var pckry = $container.data('packery');

[mfrosch]

Hi desandro,

thanks for your quick help!
I already tried "var pckry = Packery.data( $container );" instead of "var pckry = $container.data('packery');"
facepalm : )

Thanks and Cheers,
Matthias

[desandro]

So close! var pckry = Packery.data( $container[0] ); would have worked too

[desandro]

Here's a version with jQuery http://codepen.io/desandro/pen/GcDbr

[thekinder]

Hello desandro,
I'm very used to jQuery but I'm using it with packery.
With your last example: http://codepen.io/desandro/pen/GcDbr, how would I change the text of each item like in this example : http://codepen.io/desandro/pen/mdJnF
I tried to use the content of the localStorage but in vain.
In fact I need that for one of my client. Each item comes from a database and my client wants to be able to drag the position of each item at his convenience and then save each new position back in the database.
So for each item, when I validate my form, I need the initial position, and the final position of each item.
Hope you'll be able to help me. I also hope I'm clear enough ...

Thanks !

[desandro]

Reopening, others have have asked for this consistently. I'm thinking about adding it to the docs.

[mfrosch]

Sounds good. For your information. Currently after drag I count the items and set a number to each item. Those numbers I save via ajax in database and reuse them. If you like I could try to get time for a reduced test case.

Currently I'm thinking about a solution for reusing the sort order in combination with sticky items which should be always on the same place. Or is there already some example for this?

Thanks and cheers,
Matthias

[kosir]

I have a problem, because I use animate item size on click event, so when I use draggie item change state(expands/collapse). In the same time I'd like to reorder item data.
I'd like to get element data on drag start event, so I can remember item state on drag start and recreate that state on dragend or dragitempositioned event. Or I would like to set off classie on drag start and then set classie on when dragitempositioned event is fired. Anyway, I'd like to access dragstart event of draggie. Can you please help me to achieve this goal? Thanks in advance for any hint.
Best regards, Milan

[kosir]

I've succeeded to trap this with "is-positioning-post-drag" class, which I check in click event, so consider this resolved.
BR, Milan

[jhawas]

how can i save layout using packery and retrieve the original layout.

[desandro]

Packery v2 has new drag behavior, which requires a new technique to save & restore drag position. Closing this issue here, picking it up in #337