{"action":"created","issue":{"url":"https://api.github.com/repos/Shopify/draggable/issues/288","repository_url":"https://api.github.com/repos/Shopify/draggable","labels_url":"https://api.github.com/repos/Shopify/draggable/issues/288/labels{/name}","comments_url":"https://api.github.com/repos/Shopify/draggable/issues/288/comments","events_url":"https://api.github.com/repos/Shopify/draggable/issues/288/events","html_url":"https://github.com/Shopify/draggable/issues/288","id":370812612,"node_id":"MDU6SXNzdWUzNzA4MTI2MTI=","number":288,"title":"How to persist new location information?","user":{"login":"brianabaker","id":28078297,"node_id":"MDQ6VXNlcjI4MDc4Mjk3","avatar_url":"https://avatars3.githubusercontent.com/u/28078297?v=4","gravatar_id":"","url":"https://api.github.com/users/brianabaker","html_url":"https://github.com/brianabaker","followers_url":"https://api.github.com/users/brianabaker/followers","following_url":"https://api.github.com/users/brianabaker/following{/other_user}","gists_url":"https://api.github.com/users/brianabaker/gists{/gist_id}","starred_url":"https://api.github.com/users/brianabaker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brianabaker/subscriptions","organizations_url":"https://api.github.com/users/brianabaker/orgs","repos_url":"https://api.github.com/users/brianabaker/repos","events_url":"https://api.github.com/users/brianabaker/events{/privacy}","received_events_url":"https://api.github.com/users/brianabaker/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-16T21:44:08Z","updated_at":"2018-10-16T22:03:29Z","closed_at":null,"author_association":"NONE","body":"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? \r\n\r\nLibrary version: [1.0.0-beta.6]\r\nBrowsers:  [Chrome vX ]\r\nTech stack: [HTML/CSS/JavaScript/Rails]\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/Shopify/draggable/issues/comments/430417190","html_url":"https://github.com/Shopify/draggable/issues/288#issuecomment-430417190","issue_url":"https://api.github.com/repos/Shopify/draggable/issues/288","id":430417190,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMDQxNzE5MA==","user":{"login":"worsnupd","id":6721376,"node_id":"MDQ6VXNlcjY3MjEzNzY=","avatar_url":"https://avatars0.githubusercontent.com/u/6721376?v=4","gravatar_id":"","url":"https://api.github.com/users/worsnupd","html_url":"https://github.com/worsnupd","followers_url":"https://api.github.com/users/worsnupd/followers","following_url":"https://api.github.com/users/worsnupd/following{/other_user}","gists_url":"https://api.github.com/users/worsnupd/gists{/gist_id}","starred_url":"https://api.github.com/users/worsnupd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/worsnupd/subscriptions","organizations_url":"https://api.github.com/users/worsnupd/orgs","repos_url":"https://api.github.com/users/worsnupd/repos","events_url":"https://api.github.com/users/worsnupd/events{/privacy}","received_events_url":"https://api.github.com/users/worsnupd/received_events","type":"User","site_admin":false},"created_at":"2018-10-16T22:03:29Z","updated_at":"2018-10-16T22:03:29Z","author_association":"NONE","body":"@brianabaker Persisting the state of draggable elements is a little outside the scope of this project, but I can try to offer guidance.\r\n\r\nFrom 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.\r\n\r\nTo 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."}}
{"actor":{"display_login":"worsnupd"}}