search

Shopify / draggable

The JavaScript Drag & Drop library your grandparents warned you about.
https://shopify.github.io/draggable
MIT License
17.96k stars 1.09k forks source link

How to persist new location information? #288

Open brianabaker opened 6 years ago

brianabaker commented 6 years ago

Hello I'm using new window.Draggable.Sortable to make a sortable list and the drag and drop aspects of it are working fine, but I don't see any info on how to gather the new items' locations and save them to a backend anywhere in the documentation. I want the new locations to persist after page refresh. Is there no way to do this?

Library version: [1.0.0-beta.6] Browsers: [Chrome vX ] Tech stack: [HTML/CSS/JavaScript/Rails]

thesnups commented 6 years ago

@brianabaker Persisting the state of draggable elements is a little outside the scope of this project, but I can try to offer guidance.

From a high level, you want to keep an in-memory representation of the order of the sortable elements (perhaps in an array) and update it after each sortable:stop event based on the oldIndex and newIndex properties of the event object. Then, whenever you are ready to save, you'd persist that array either to the backend, or local/session storage, etc, as the case may be.

To close the loop, you need to load the persisted data on page load and make sure that the initial order of the draggable elements in the DOM is determined by the array. This should be as simple as looping over the array and inserting nodes into the DOM.

brianabaker commented 6 years ago

Thanks for the advice!