jQuery UI #7084 Draggable with parent containment and margin

http://bugs.jqueryui.com/ticket/7084

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<div id="bar"></div>

CSS

html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

#bar {
    background: rgba(0,0,0,0.5);
    height: 35px;
    cursor: pointer;
    width: 200px;
    margin: 10px;
    border: 10px solid rgba(0,0,0,0.5);
}

JavaScript

$('#bar').draggable({
    containment: 'document',
    scroll: false
});