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="container">
    <div id="right">
            <div id="wishlist" class="dropzone"> 
                <h4>HERE</h4>
                <div class="container">
                </div>
                <span class="bottom">Drag your items here.</span>
            </div>     
    </div>
    <div id="left">
        <div id="main">
        
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
            <div...

CSS

/*-------------------------------------
STRUCTURE
-------------------------------------*/

body, html 
{
    background: #E3E7F2;
    font-family:"Century Gothic";
}

div, a, span, td, dd
{
    font:'Century Gothic' 12px;
    color:#000;
}

#container {
    width:1000px;
    margin: 0 auto;
    text-align:left;
    background:#FFF;
}

#container #right 
{
    width:222px;
    float:right;
}

#container #left 
{
    width:764px;
    padding:5px 6px 0 3px;
    background: #fff url(/img/bg_cont_right.png) right repeat-y;
}

.cont-twocol
{
    background-color:#AAB8D3;
}


        .dropzone 
        {
            width: 180px; 
            padding: 1%;
        }

        #wishlist 
        {
            position:fixed;
            top:30px;
        }

        #excludelist 
        {
            position:fixed;
            bottom:30px;
        }

        .dropzone .container 
        {
            overflow:auto; 
            height: 100px;     
            margin: 5px 5px 14px 5px;
            background: #fff;
            border:1px solid #fff;
        }

        .dropzone .container h1
        {
            margin:2px;
            padding:2px;
            background: #CBD2DC;
            color: #48608f;
            font-size:11px;
            font-family:Verdana;
        }

        .dropzone .bottom
        {
            position:absolute; 
            bottom:3px; 
            right: 3px; 
            font-size:11px; 
            font-family:Arial;
        }

        .dropzone 
        {
            background:#AAB8D3;
            margin: 3px;
            padding: 5px 0 5px 0;
        }

        .dropzone h4 
        {
            text-align:center;
            font-size:16px;
            color:#000;
        }

JavaScript

$(document).ready(function() {
        // there's the gallery and the trash
        var $gallery = $('.tab-container').eq(0), $wishlist = $('#wishlist'), $excludelist = $('#excludelist');

        // let the gallery items be draggable
        $('div.item').draggable({
            cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
            revert: 'invalid', // when not dropped, the item will revert back to its initial position
            containment: 'document', // stick to demo-frame if present
            opacity: 0.7,
            helper: cloneMe,
            cursor: 'auto'
        });
        
        // let the trash be droppable, accepting the gallery items
        $wishlist.droppable({
            accept: 'div.item',
            hoverClass: 'ui-state-highlight',
            tolerance: 'touch',
            drop: function(ev, ui) {
            }
        });
    });
    
    /* Clones the draggable item and sets a fixed width to correctly show on major browsers */
    function cloneMe(ev) 
    {
        return $(this).clone().width("150px");
    }