Draggable Tiles JQuery

A little experiment to see if I can create horizontal tiles.

by Yolanda Robles

HTML

<div class="boxContainer">
    <ul id="column1" class="connectedSortable">
        <li class="box1"></li>
        <li class="box2"></li>
        <li class="box3"></li>
    </ul>
    <ul id="column2" class="connectedSortable">
        <li class="box4"></li>
        <li class="box5"></li>
        <li class="box6"></li>
    </ul>
    <ul id="column3" class="connectedSortable">
        <li class="box7"></li>
        <li class="box8"></li>
        <li class="box9"></li>
    </ul>
    <ul id="column4" class="connectedSortable">
        <li class="box10"></li>
        <li class="box11"></li>
        <li class="box12"></li>
    </ul>
</div>

CSS

.boxContainer
{
    margin:0px;
    width:900px;
    height:auto;}

#column1, #column2, #column3, #column4 { 
    list-style-type: none;
    margin:9px 9px 9px 0px;
    float:left;
    height:auto;
    width:120px;
}

#column1 li, #column2 li, #column3 li, #column4 li { 
    height:auto;
    width:120px;
}
.box2, .box4, .box9 {
    margin:0px 0px 9px 0px;
    background-color:#409da5;
}

.box10, .box1, .box5 {
    margin:0px 0px 9px 0px;
    background-color:#da8515;
}
.box8, .box11, .box3 {
    margin:0px 0px 9px 0px;
    background-color:#4849a6;
}
.box6, .box7, .box12 {
    margin:0px 0px 9px 0px;
    background-color:#cd432d;
}

JavaScript

$("ul.connectedSortable").sortable({
    connectWith: '.connectedSortable',
    placeholder: 'ui-state-highlight',
    forcePlaceholderSize: true
}).disableSelection();


$('li').each(function() {
    $(this).text($(this).attr('class'));
});

$('.box1, .box9, .box2,.box10, .box4, .box6, .box12, .box8').append('<div style="height:120px;"></div>');

$('.box3, .box5, .box11, .box7').append('<div style="height:267px;"></div>');