DRAGGABLE - SCROLL DIV - working example of a dragable element inside a container with overflow: scroll - BIZAMAJIG USAGE

http://stackoverflow.com/questions/16020798/jquery-ui-draggable-scroll-issue

HTML

<script src="http://www.nerdydork.com/demos/dragscroll/jquery.aautoscroll.2.4.js"></script>
<table>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
</table>

<div class="upper"></div>
<div class="drop_area">
<ul>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
</ul>
</div>
<div class="lower"></div>

CSS

.drop_area {
    height: auto;
    max-height: 100px;
    overflow-y: scroll;
    border: 1px solid black;
    position: relative;
}
.drop_on_me {border: 1px solid white;}
.hover {
    background-color: #CCC;            
}
.upper, .lower {
    height: 16px;
    position: fixed;
    width: 100%;
    background: rgba(50, 50, 50, .5);
    z-index: 10;
}
.lower {margin-top: -16px;}
.active {
    border: 1px solid yellow;
        
}

JavaScript

$('.drag_me').draggable({
    helper: 'clone',
    scroll: 'true',
    refreshPositions: true
});

$('.drop_on_me').droppable({
    accept: '.drag_me',
    activeClass: 'active',
    hoverClass: 'hover',
    tolerance: 'pointer'
});
$('.upper').droppable({
            over: function(event, ui){
                $('.drop_area').autoscroll({
                    direction: 'up',
                    step: 150,
                    scroll: true
                });
            },
            out: function(event, ui){
                $('.drop_area').autoscroll('destroy');
            }
        });

        $('.lower').droppable({
            over: function(event, ui){
                $('.drop_area').autoscroll({
                    direction: 'down',
                    step: 150,
                    scroll: true
                });
            },
            out: function(event, ui){
                $('.drop_area').autoscroll('destroy');
            }
        });