Sortable Columns

If you have ever visited websites like Yahoo, MSN or Google, youâ€™ve probably noticed that they provide a way for users to customize or rearrange their homepage.

Demo: See the Sortable Columns in action

In this tutorial, we are going to look at how we can use the Raxan Framework and the jQuery interactive APIs to rearrange DIV elements on a web page.

The HTML Layout
The first thing we will do is to layout our web page with 3 columns, each containing 3 DIV elements (or blocks).


<style type="text/css">
    /* css class used for placeholder */
    .place {height:20px; background:#ffcc00; margin: 10px}
    /* center div text */
    .column div {text-align:center; line-height:100px; font-size:1.3em}
</style>

<div class="container c39 pad">
    <h1>Sortable Columns</h1>
    <hr />
    <h2>Drag and drop the blocks around to rearrange them</h2>
    <hr class="space" />

    <div class="column c11 border">
        <h3>Column 1</h3>
        <div class="box round c9 r5  margin">S</div>
        <div class="alert round c9 r5  margin">T</div>
        <div class="info round c9 r5  margin">L</div>
    </div>
    <div class="column c11  border">
        <h3>Column 2</h3>
        <div class="success round c9 r5  margin">O</div>
        <div class="notice round c9 r5  margin">A</div>
        <div class="alert round c9 r5  margin">E</div>
    </div>
    <div class="column c11 last border">
        <h3>Column 3</h3>
        <div class="info round c9 r5  margin">R</div>
        <div class="box round c9 r5  margin">B</div>
        <div class="success round c9 r5  margin"></div>
    </div>
</div>

Note: You can copy the content of one of the page templates from the raxan/templates folder to get off to a quick start. You will also need to include the master.css stylesheet.

The Code Behind the page
Once we have created the layout, we need to include the jQuery library and interactive APIS.


html.include('jquery');
html.include('jquery-ui-interactions');

Next, we will use the sortable() function to enable the DIVs so that they can be rearranged by dragging an dropping them across the columns.


html.ready(function(){
    $('.container .column').sortable({
        connectWith:['.column'],
        placeholder: 'place',
        items:'div'
    });
})

Live Example: See the Sortable Columns in action

Conclusion
This tutorial only highlighted the basics of creating a customizable web page. There are many things that we can do with the above code. For example, we could use panels to replace the DIVs and then save the page layout for each logged in user.

To learn more about the jQuery sortable API, visit the jQuery Documentation web page. To learn more about the Raxan CSS Framework visit the Getting Started with Raxan web page