Scriptaculous sortable matrix

Question

Hi all!

I am trying to create a sortable image matrix, 5x5 using scriptaculous javascript library by I can't make it work.

I am trying using a table but I am having trouble linking the <td> into the Sortable object.

Do you guys have any hint or documentation I can go through to create this ?

Thanks

Answer 1

Use floating DIVs, not tables.

1) Create a class in your stylesheet for your boxes.

.boxes {
  float:left;
  width:150px;
  height:150px;
  border:1px solid #cccccc
}

2) Make a container for your boxes. and put the boxes inside.

<div id='container' style='width:750px;height:750px;'>
<div id='box1' class='boxes'></div>
...etc
</div>

3) Make your Sortable

Sortable.create('container',{tag:'div'})

There is a demo of this type of thing available here.

Drop me a line if you need more help.