Resizable grid bug demo

Demonstrates that a jQuery UI resizable can be moved when the grid option is set.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="region"><p>Resizable should not move out of this.</p></div>

<div id="resizable" class="ui-widget-content" style="">
	<h3 class="ui-widget-header">Resizable</h3>
    <p>Move me by dragging the north handle down or the west handle to the right.</p>
</div>

CSS

#resizable {
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 5px;
    top: 30px;
    left: 30px;
    overflow: hidden;
    background: rgba(240,240,240,0.75);
}

#resizable h3 {
    text-align: center;
    margin: 0;
}

#region {
    position: absolute;
    border: 1px dashed slategray;
    width: 200px;
    height: 200px;
    padding: 5px;
    top: 30px;
    left: 30px;
    background: white;
}

#region * {
    margin: 80px 40px;
    text-align: center;
}

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
    background: lightslategray;
}

JavaScript

$(function() {
	$( "#resizable" ).resizable({
		handles : "all",
		grid: 50
	});
});