Question

I am trying to create a sortable image matrix, 5×5 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.