it’s tricky to rock a style thats liked online

Sortable Slideable Saveable - a Mootools 1.2 class

Sortable Slideable Saveable (sss) is a class I wrote up that allows you to have a list of elements that can be sorted, toggled, and the state of each will be saved each time a change is made, either using a cookie or a couple of ajax / json calls.

It can be seen in action in my sidebar to the right. You can drag / sort them by dragging the icons, and you can toggle them by clicking on the title of each. Any changes you make will be stored in a cookie, you can reload the page and they should be in the state you left them in.

I will probably update this and provide some detailed documentation shortly. If anyone has any questions, let me know. Also if anyone has any input on how to make it better, let me know.

another example

download w/the example

12 Responses to “Sortable Slideable Saveable - a Mootools 1.2 class”

  1. keif's gravatar

    Your side bar isn’t working for me (OS X, FF3.0.1) but your other example works flawlessly.

    Very cool script, and I love that it’s default state works with JS off.

  2. atom's gravatar

    hmm, i guess someone is going to have to let me borrow a mac :p

  3. links for 2008-07-30 | iKeif - mootools, jquery, social media and a ton of links's gravatar

    [...] Guide to Earning Six Figures: Changing Your Mind 13 hours agoInformation about going free lance.trickeries! » Blog Archive » Sortable Slideable Saveable - a Mootools 1.2 class 14 hours agoVery cool mootools 1.2 class for slideable sortables that are savable via cookies!The [...]

  4. keif's gravatar

    WEEELLL I could play around with it a bit and see if I can figure it out (or if it’s just FF# acting buggy).

  5. atom's gravatar

    It is a little odd that there is a difference in FF between systems, I would like to assume the engines in use would be exactly the same, however I have already seen stupid differences in the rendering of styles between the two. My assumption is that it is just a goofy issue with CSS.

  6. Tyler's gravatar

    brilliantly executed, as usual.

  7. atom's gravatar

    ^ _ ^

  8. electronbender's gravatar
    electronbender Says:
    August 13th, 2008 at 5:47 am

    Chief,
    Can you add a nested ability to this thing? That would realyyyyy be nice…

  9. Rob C's gravatar

    Hi,

    The ’savable’ side of things doesn’t seem to work on your example (the one linked here, and the one downloaded).

    I can see the PHP code at the top, but how does one implement the save?

    Thanks!

  10. atom's gravatar

    @Rob, What I have there in the example is just a quick and dirty example using sessions. In order to have this saved in any meaningful sense you are going to need to write / read the state to and from somewhere.

  11. dakota's gravatar

    Could this be modified to support dragging to multiple columns?

  12. dakota's gravatar

    How can I style the drop areas to have a dotted border? by this I mean when dragging one, how can I get the areas I can release it to to have a border… I’ve been trying to have it add a class, but can’t figure out where in the sss code to add it.

Leave a Reply