Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Andrew Young
Courses Plus Student 639 PointsHow to save draggable element position
1 Answer
Kevin Korte
28,149 PointsIn theory yes, depending on the code that allows the drag and drop feature, it would need, or you would need to add some sort of callback that fires after an element has been resized, and get the size (height and width) of the resized element in the callback, save those two dimensions into a database, and then use those values to set an inline css styles for the height and width with the page load. So for instance you might have html that looks like
<div class="draggable" style="width: ${draggable.width}; height: ${draggable.height}"></div>"
Where those values would be interpolated from the saved values in the database.
Hope that helps.
Andrew Young
Courses Plus Student 639 PointsAndrew Young
Courses Plus Student 639 PointsThanks, for dragging and resizing method I use jquery-ui's draggable and resizable function
Here is the code, I change the key jquery function that allow you for dragging to js list in the html file
Other embed file is mostly jquery and jquery-ui source code and some custom element styling
If you need the full code you can go to the embed link all custom code isn't minified
With these resource can you tell me how can I save it?
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsHey Andrew,
Do you already have some sort of persistent database set up? Setting all of this up is outside of the scope of what can be handled on a forum, but I encourage you to try it, and as you come up on issues, post them to the forum for help. Bite sized questions are much easier from a practical, and time aspect to help on.
Now back to your question, both of the draggable and resizable have events that get called, which you could use to trigger an update to a persistent database to remember the position and size of the element.
Draggable stop event: http://api.jqueryui.com/draggable/#event-stop Resizable stop event: http://api.jqueryui.com/resizable/#event-stop
Those events will give you the information you need to save to a persistent database, to show the the modules in the correct position and size later.
Let me know if that gets you pointed in the right direction better. I do care that you are able to get this done, but part of the struggle is learning how to do this on your own accord. Two areas I'd start on. First get your code so that the stop events are console logging the new values to your browser console, and know how to capture those values.
Then get your persistent database set up - mongodb is one option. mLab has a forever free tier for mongodb hosting that will be sufficient, or you can set it up locally too. Then just connect the two - the jquery ui events need to create or update a record in the database, and the html template needs to be able to read those values and set them as inline css when the page loads or reloads. Basically 4 big pieces to work on to make this all come together.