For start we need jQuery, ui.core and ui.sortable, make sure you download them and include them in the header of your application:

<script src=”jquery-latest.js”></script>
<script src=”ui.core.js”></script>
<script src=”ui.sortable.js”></script>

after that we use this little code snippet to make the magic:

<script>

$(document).ready(function(){

$(“.thelist”).sortable({

cursor: ‘.handle’,

update : function () {

serial=$(‘.thelist’).sortable(‘serialize’,'id’);

$(“#target”).load(“load.php”, { list: serial } );

}

});

});

</script>

In the html we have a div with the class thelist, this is the div that contains the sortable elements, each having a unique id.

<div class=”thelist”>

<div class=”divo” id=”el_1″>Item 1</div>

<div class=”divo” id=”el_2″>Item 2</div>

<div class=”divo” id=”el_3″>Item 3</div>

<div class=”divo” id=”el_4″>Item 4</div>

<div class=”divo” id=”el_5″>Item 5</div>

</div>

After each drag and drop operation in load.php will receive a string with the order of the divs, the result will be something like this:

el[]=3&el[]=4&el[]=5&el[]=2&el[]=1

This data is sent to load.php with POST, beeing contained in the list variable: $_POST['list']

This is only a basic demonstration, you can do much advanced functionality with jQuery Sortable, you just need a little time and a little coffee.

Related posts:

1. 6 books for developers working with Drupal 6 and Jquery
2. How to build a clickmap using PHP and jQuery
3. How to use post for JSON instead of jQuery’s getJSON

It seems that Google indeed has big plans with Chrome. That’s why they built in a very advanced and fast Javascript engine called V8. This Javascript engine will allow developers to create highly advanced applications that run directly in the browser without any other plugins, giving Chrome a huge advantage over Internet Explorer and Firefox.

To demonstrate Chrome’s abilites Google announced the so called Chrome Experiments, a handful of applications designed for Chrome. For example there is a Tetris game made entirely with the use of Javascript and CSS, without any other plugin. But the DOM Tetris is just one of many experiments.

Experiments that work very well on Chrome. Google advises us that they may work on other browsers too, but much slower. And i tried to run them on Firefox, some of them worked, some of them not.

Back to Chrome. My opinion is that this is the future, this is how applications will be done. I think that as soon as Chrome is mature enough, even more desktop software will move online so users will just need an operating systems and a browser.

Chrome’s abilities are powerful indeed, most of those who didn’t adopt Chrome yet, did this because of the lack of extensions (Firebug is a killer,  you can’t live whitout it). But Google is working on this too, the proof is that there is alredy an extension howto page and i think extensions will land for regular users (easy setup and so on) not later then the middle of this year. Matt Cutts posted already a an example and a short description on howto setup your first Chrome extension if you can’t wait till then.

But when extensions will become something usual for Chrome, the speed and the abilities of the browser will make very hard for the competition, especially for Microsoft to catch up with Google.

Related posts:

1. The 5 best Firefox extensions for web developers
2. Popup management in the new Google Chrome
3. Google Chrome in Internet Explorer!

Headlines from the first issue

• Debugging JavaScript without alert()
• Introduction to ExtJS
• Community News
• Unit testing with YUI
• What’s new in jQuery 1.3
• Functional Programming in JavaScript

Seems rather good but its interesting to see if a subscription based magazine it will have success in these times.

Related posts:

1. HTML and Javascript code to crash IE6
2. Powermail javascript bug
3. Tips for improving your PHP programming skills