Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<table>
    <tr><th>Applets</th><th>Paragraphs</th></tr>
    <tr>
    <td valign="top">
        <div class="list">
            <div class="drag"> 
                <div class="handle">&nbsp;</div>
                <applet name="HelloWorld" id="HelloWorld" code="HelloWorld.class" archive="http://jquery.malsup.com/test/" width="150" height="50" mayscript="true"> 
                </applet> 
            </div> 
            <div class="drag"> 
                <div class="handle">&nbsp;</div>
                <applet name="HelloWorld" id="HelloWorld" code="HelloWorld.class" archive="http://jquery.malsup.com/test/" width="150" height="50" mayscript="true"> 
                </applet> 
            </div> 
            <div class="drag"> 
                <div class="handle">&nbsp;</div>
                <applet name="HelloWorld" id="HelloWorld" code="HelloWorld.class" archive="http://jquery.malsup.com/test/" width="150" height="50" mayscript="true"> 
                </applet> 
            </div> 
        </div>
    </td><td valign="top">
        <div class="list">
            <div class="drag"> 
                <div class="handle">&nbsp;</div>
                <p>Hello World</p>
            </div> 
            <div class="drag"> 
                <div class="handle">&nbsp;</div>
                <p>Hello World</p>
            </div> 
            <div class="drag"> 
                <div class="handle">&nbsp;</div>
                <p>Hello World</p>
            </div> 
        </div>
    </td></tr></table>

CSS

div.drag { width: 150px; height; 170px; background-color: #eee; margin: 15px; border: 1px solid #ccc }
div.handle { height: 20px; background-color: orange; cursor: move }
p { text-align: center }

JavaScript

$('div.list').sortable({
        distance:  5,
        appendTo: 'body',
        handle:   '.handle'
    });