Scriptaculous sortable matrix
-
03-07-2019 - |
Question
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
Solution
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.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow