Containing Draggables by Parent and Grid

How to constrain the movement of jQuery UI draggable widgets combining the grid and containment options.

HTML

<div class="container ui-widget-content">
    <div class="ui-state-default"></div>
</div>

CSS

body {
    margin: 3em;
    font-size: 0.8em;
}

.container {
    height: 4em;
    width: 240px;
}

div.container div.ui-state-default {
    width: 40px;
    height: 100%;
    border: none;
    background-image: none;
    cursor: move;
}

JavaScript

$( '.container div' ).draggable({
    containment: 'parent',
    grid: [ 70, 0 ]
});