We'll use a list to organize our buttons, as follows:

<ul>
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
</ul>

We'll use the following CSS to fix the list layout to better display button widgets.

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 4px;
}

The JavaScript code to make this happen is actually quite miniscule—we create the buttons, then we apply the sortable interaction widget.

$(function() {
    $( "a" ).button();
    $( "ul" ).sortable({
        opacity: 0.6
    });
});

At this point, we're able to drag-and-drop buttons—but only within the designated container element, in this case...