Drag whilte attached to bottom

by Ronny

HTML

<aside>
    <h2>Top Link</h2>
    <div class="apps">
<div class="app facebook">
    <h2>facebook</h2>
    <div>Content</div>
</div>

<div class="app twitter">
    <h2>twitter</h2>
    <div>Content</div>
</div>

<div class="app youtube">
    <h2>YouTube</h2>
    <div>Content</div>
</div>
    </div>
</aside>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>

CSS

aside {display: block; width: 150px; background: #0d576f; height: 500px; position: relative; padding: 3px;}
aside>h2 {background: #FFF;}

.apps {position: absolute; bottom: 3px;}
.app {width: 138px; padding: 5px; background: #FFF; border: 1px solid #ccc; margin-top: 10px;}
.app div {height: 45px;}

.app h2 {cursor: move;}

/* brandes */
.facebook h2 {background: #3b5998; color: #fff;}
.twitter h2 {background: #5cd6ff;}
.youtube h2 {background: #ff3333; color: #fff;}

JavaScript

$('.apps').sortable({
    axis: 'y',
    tolerance: 'pointer',
    beforeStop: function(event, ui){
        console.log(ui.offset);
    }
});