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">

<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
<div id="draggable">Drag me</div>
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>


<div class="outer-drop-panel">
    <div class="drop-panel">
        <dl id="open" class="top-title">
            <dd class="title">
                <img src="images/title-artist-shortlist.gif" alt="Artist Shortlist" /></dd>
            <dd class="text">
                Drag n’ Drop</dd>
            <dd class="show">
                <img src="images/link-show.gif" alt="Show" title="Show" onmouseover="this.src='images/link-show-o.gif'"
                    onmouseout="this.src='images/link-show.gif'" />
            </dd>
        </dl>
        <dl id="close" style="display: none;" class="top-title">
            <dd class="title">
                <img src="images/title-artist-shortlist.gif" alt="Artist Shortlist" /></dd>
            <dd class="text">
                Drag n’ Drop</dd>
            <dd class="show">
                <img src="images/link-close-black.gif" title="Close" alt="Close" onmouseover="this.src='images/link-close-black-o.gif'"
                    onmouseout="this.src='images/link-close-black.gif'" />
            </dd>
        </dl>
        <dl id="Content" style="display: none;">
            <dd class="gray-box">
                <dl class="inner">
       ...

CSS

#draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
    #droppable { position: absolute; top: 25px; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }

  .drop
    {
        width: 780px;
        height: 140px;
        margin-top: 18px;
        position: absolute;
        top: 25px;
        opacity: 0.7;
        overflow: auto;
    }

   .droppable-active
    {
        opacity: 1.0;
    }
    .droppable-hover
    {
        outline: 1px dotted black;
    }

.drop-panel{width:980px; position:fixed; bottom:0; }
.drop-panel .top-title{height:34px; background:url(../images/title-black.gif); width:980px;}
.drop-panel .top-title .title{float:left; padding:10px 0 0 20px; width:230px; }
.drop-panel .top-title .text{float:left; width:470px; text-align:center;  line-height:34px;}
.drop-panel .top-title .show{float:right; widows:230px; padding:10px 20px 0px 0px;}

.drop-panel .gray-box{width:978px; height:140px; border:1px solid #565656; background:#fff url(../images/bg-gry-box.gif) no-repeat right; }
.drop-panel .gray-box .inner{padding:8px 0 0 15px;}
.drop-panel .gray-box .item{background:url(../images/panel-item-bg.gif); width:91px; height:125px; float:left; margin-right:4px;}
.drop-panel .gray-box .item .inner{padding:3px 0 0 5px;}
.drop-panel .gray-box .button{ float:right; width:175px; padding-top:50px;}

.drop-panel .btm-pageing{height:35px; width:978px; border:1px solid #565656; border-top:none;  background:url(../images/bg-btm-panel.gif) repeat-x;}
.drop-panel .btm-pageing .remove-btn{float:left; width:91px; padding:8px 0 0 16px;}
.drop-panel .btm-pageing .paging{line-height:35px; float:left;   width:820px; text-align:center;}

JavaScript

$(document).ready(function(){
    $("#draggable").draggable({  refreshPositions: true, start: function(ev, ui) {
            showFirst();
        }
        });
$(".drop").droppable({
 activeClass: 'droppable-active',
            hoverClass: 'droppable-hover',
  drop: function() { alert('dropped'); }
});
  });
    $(document).ready(function() {
        $("#open").click(show);
        $("#close").click(hide);
    });
    function show() {
        $("#Content").slideToggle("slow");
        $("#open").slideToggle("slow");
        $("#close").slideToggle("slow");
    }
    function showFirst() {
        $("#Content").slideDown("slow");
        $("#open").slideUp("slow");
        $("#close").slideDown("slow");
    }
    function hide() {
        $("#Content").slideToggle("slow");
        $("#open").slideToggle("slow");
        $("#close").slideToggle("slow");
    }