Drag n Drop sections on the BBC website, how is it done?

I have a new project to plan and the client likes the BBC's drag / drop sections on the home page. How is t开发者_JAVA技巧hat done ? Is it with a framework like Sencha or jQuery ?

Thanks

Rich :)

The BBC uses its own JavaScript framework called Glow. What you're looking at is probably the sortable widget.

The "Customisable Homepage Demo" at the bottom of the sortable widget documentation looks like a barebones version of the BBC homepage.

$(function(){   
    $('.bucket').sortable({
        connectWith: '.bucket'
    });

    $('.element').draggable({
        connectToSortable: '.bucket'
    });
    $('ul', 'li').disableSelection();
})

This allows you to have many containers, and you can drag elements between containers.

Press the '+' element to create a 'task'. Then try and drag it. An example: http://jsfiddle.net/RD5M6/3/

For further reading: http://jqueryui.com/demos/sortable/

most likely a custom version of http://jqueryui.com/demos/sortable/#display-grid

The BBC are most likely using their own Javascript library. Glow, as mentioned already.

But this type of interface can also be achieved with jQueryUI or Scriptaculous:

http://jqueryui.com/demos/draggable/

http://madrobby.github.com/scriptaculous/draggable/