jQuery UI Selectable - Display as grid
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
$(function() {
$("#selectable").selectable();
});
1
2
3
4
5
6
7
8
9
10
11
12
To arrange selectable items as a grid, give them identical dimensions and float them using CSS.