HavaLite CMS

A new liteweight Content Management System (CMS)


Sortable2php - a JQuery plugin to save sortable widgets via php

I don't know if there is a simpler way than using JQuery to solve some complicated methodes for the web. Also the plugins of Jquery are the best way to do things once and simply configure and use any where u want. For my project Havalite i needed to do some nice widgets and i found a finished solution on the JQuery UI Site for a free download. The only thing remains is to save the position of the widgets according to there nested boxes.

For this tutorial u need Jquery and the JQuery UI which can be downloaded from here.

Before we go further with the explanation maybe you would like to see a demo.



How it Works

Now after downloading Jquery UI, unzip the file in a folder on your server (It must be run on server, cause we need the usage of Php).

Download Sortable2php plugin and unzip it

now you need to specify the source of the css file of UI (im using here the theme "smoothness", but u can use another), the adresse of the jquery and our plugin "sortable2php.js"

<link rel="stylesheet" type="text/css" href="jquery/development-bundle/css/smoothness/jquery-ui-1.8.16.custom.css" />    
<script type="text/javascript" src="jquery/js/jquery-1.7.2.min.js">/* jQuery */</script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.16.custom.min.js">/* UI */</script>
<script type="text/javascript" src="jquery/sortable2php.js"></script>

If you open the demo.htm file you'll find some css and Javascript code for a better visualization purpose

// The CSS
#column{ width: 220px; float: left; padding: 7px 1px 100px 1px; margin:3px;  border:1px dotted #ccc; }
.portlet { margin: 0 6px 6px 6px; border:1px solid #ccc; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; background-color:#CCCCCC; cursor:move; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; display:none; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
.ui-icon, .ui-icon-plusthick { cursor:auto; }


// UI design ------------------------
$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-plusthick'></span>")
    .find( ".portlet-content" );

$( ".portlet-header .ui-icon" ).click(function() {
    $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
    $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle('blind');

Now we come to the main part to show the usage of sortable2php:

First build the html, give a class name for the main div (i named it here "column1" to "column3") and set the same name by calling the plugin later

<div id="column" class="column1">
    <div class="portlet" id="item_1">
        <div class="portlet-header">item 1</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    <div class="portlet" id="item_2">
        <div class="portlet-header">item 2</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>

We call our plugin and set the names of the prepared columns (i have here 3 column).

and than we give the id value (#info) to view results of the ajax request (can be left empty, if u don't like to view them)

than i set the name of the php file and the argument of a GET request like this: "sortable2php.php?columns="

$('.column1, .column2, .column3').sortable2php('#info', 'sortable2php.php?columns=');

in the php file you can connect to your database, save recieved informations etc..

comments powered by Disqus


    Leave a Reply

    Contact Info

    Phone: +49 941 26175

    Address: Ayman Teryaki,
    Prüfeninger Str. 48,
    93047 Regensburg, Germany

    Want more info - go to our contact page or visit Google+


    Stay up to date. Subscribe via RSS, Facebook, Twitter or Email

    Recent Comments