Page 1 of 1

Scriptaculous - randomly shuffle a sortable

Posted: Sat Mar 03, 2007 3:05 pm
by Luke
I have been looking on script.aculo.us trying to find a way to randomly shuffle a sortable list. I am definitely no DOM expert, so I wouldn't really know where to start if I wanted to do it by hand. Does anybody have any idea how I could accomplish this? My list looks like this:

Code: Select all

  <ul id="show_block_list">
   <li id="show_12"><a href="javascript:;" onclick="delete_from_list('show_12');"><img src="images/delete.png" class="delete" width="16" height="16"></a><img src="images/move.png" width="16" height="16" class="handle"><strong>The Cool Show</strong> - 144 seconds</li>
   <li id="show_13"><a href="javascript:;" onclick="delete_from_list('show_13');"><img src="images/delete.png" class="delete" width="16" height="16"></a><img src="images/move.png" width="16" height="16" class="handle"><strong>The UnCool Show</strong> - 165 seconds</li>
   <li id="show_17"><a href="javascript:;" onclick="delete_from_list('show_17');"><img src="images/delete.png" class="delete" width="16" height="16"></a><img src="images/move.png" width="16" height="16" class="handle"><strong>Showness</strong> - 144 seconds</li>
  </ul>

Code: Select all

            Sortable.create("show_block_list",
            {
                dropOnEmpty:true,
                handle:'handle',
                containment:["show_block_list"],
                constraint:false
            });

Posted: Sat Mar 03, 2007 3:31 pm
by nickvd
Since you're already using jQuery, I would HIGHLY recommend you check out Interface Elements. It's jquery's own personal effects library, it offers everything the scriptaculous does (and more), without the need to include prototype.

Posted: Sat Mar 03, 2007 3:45 pm
by Luke
Yea I've used it... it's AWESOME. I would never use scriptaculous on my own projects. I'm 100% a jQuery whore like Kieran is. This is for a client's site and they use scriptaculous unfortunately. :(

Posted: Sat Mar 03, 2007 3:55 pm
by nickvd
Doh :(

I've used it in the past (before converting), but never for anything more complex than animations, never touched the drag/drop/sort aspects of it unfortunately.


<edit>

.. This shouldn't require scriptaculous. I would get the <li>'s that you want sorted into an array, shuffle the array, and replace the contents of the <ul> with the new array (iirc, the browser will move things around for you in the dom, instead of deleting and re-writing)

I would suggest looking at any decent sortable table script, as it will be operating on the table rows in much the same way that you are after (albeit random instead of sorted).