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">
<div id="sortable">
    Using sortable
    <div id="test" class="container">
        <div class="overlay"></div>
        <embed width="425" height="350" src="http://www.youtube.com/v/SDMvw6fNDR4" allowfullscreen="true" allowscriptaccess="always" quality="best" wmode="transparent" bgcolor="#fff" flashvars="" menu="false" type="application/x-shockwave-flash"/>
    </div>
</div>


<div id="draggable">
    Using draggable
    <div id="test" class="container">
        <div class="overlay"></div>
        <embed width="425" height="350" src="http://www.youtube.com/v/SDMvw6fNDR4" allowfullscreen="true" allowscriptaccess="always" quality="best" wmode="transparent" bgcolor="#fff" flashvars="" menu="false" type="application/x-shockwave-flash"/>
    </div>
</div>

CSS

#sortable {
            float: left;
        }
        #draggable {
            float: right;
        }
        .overlay {
            position: absolute;
            width: 425px;
            height: 350px;
            background: red;
            opacity: 0.6;
        }

JavaScript

var $s = $('#sortable').sortable();
    var $d = $('#draggable').draggable();