On Fri, May 19, 2006 at 08:47:16AM -0600, Tom Gregory wrote:
# The sortable demos haven't worked for a while. ( http://
# dev.rubyonrails.org/ticket/4690 )
#
# The documentation is, in most cases, out of date. The following
# worked for me:
#
# <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
# TR/html4/strict.dtd">
# <html>
# <head>
# <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
# <title></title>
# <script type="text/javascript" src="js/min/prototype.js"></script>
# <script type="text/javascript" src="js/min/scriptaculous.js?
# load=effects,dragdrop"></script>
# <script type="text/javascript">
# //<![CDATA[
#
# function buildList(times) {
# var ul = document.createElement("ul");
# ul.id = "ul" + times;
#
# var li = null;
# for (var i = 0; i < 5; ++i) {
# li = document.createElement("li");
# li.id = "li" + times + "_" + i;
# li.appendChild(document.createTextNode("List " + times + "
# Item " + i));
# ul.appendChild(li);
# }
# document.body.appendChild(ul);
#
# Sortable.create(ul, {});
#
# if ((--times) > 0) {setTimeout("buildList(" + times + ")", 2000)}
# }
#
# window.onload = function() {
# setTimeout("buildList(3)", 2000);
# }
# //]]>
# </script>
# <style type="text/css">
# body {
# position:relative;
# color: black;
# background-color: white;
# font-size: small;
# }
# li {margin: 2px; padding: 2px .5em; list-style-type:none;border:1px
# solid;cursor:move;}
# #ul1 li {background-color: #dbb;}
# #ul2 li {background-color: #bdb;}
# #ul3 li {background-color: #bbd;}
#
# </style>
# </head>
# <body>
# </body>
# </html>
Perfect example!
I'm doing basically the same thing, but I'm using the Sortable to update an
array. I then re-order the array and re-number/re-id the list. It works fine
with one list, but when I add a second list, only the second one maintains
state:
Here's how I create the sortable:
Sortable.create('pathul-' +
cg,{onUpdate:function(){reorderPaths(Sortable.serialize('pathul-' + cg))}});
and here's the callback function:
function reorderPaths(str){
var myul = str.replace(/([^[])\[.*/,'$1');
alert('doing callback for ' + myul);
var mygnum = myul.replace(/\D+-(\d+)/,'$1');
var s = str.split('&');
var tmp = new Array();
s.each(function(j){
var a = j.replace(/[^=]+=(\d+)/,'$1');
tmp.push(g[cg].paths[a]);
});
g[cg].paths=tmp;
$A($(myul).childNodes).each(function(e){
if(e.tagName.toLowerCase() == 'li'){
e.removeAttribute('id');
}
})
var i=0;
$A($(myul).childNodes).each(function(e){
if(e.tagName.toLowerCase() == 'li'){
e.id = 'pathli-' + mygnum + '_' + i;
i++;
}
})
}
Instead of your window.onload, make a button that allows you to
create multiple lists. Call each list 'pathul-' + num; where 'num' is
a variable that tracks the number of lists you've created. When you
create the second one, the first one will still appear to re-order,
but the callback fires for the most recent list created.
I realize tis would all be easier if I just posted my code, but
unfortunately, it's huge and complex.
Thanks for the reply!
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
