Smooth scroll UI draggable

Smooth scroll UI draggable

I'm having a problem with jQuery UI draggable..
I with to scroll an element within a smaller parent element, so that it
creates a kind of viewport.
However, I'm having an issue with the element being dragged as it's
snapping to the edges of the port.
Been battling with this for a while now so could really use some help...
please :)
Small sample code:
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
#port{
width:50px;
height:100px;
border:1px solid red;
overflow:hidden;
}
#obj {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
border-radius: 10px;
text-align: center;
background-color: lightpink;
}
</style>
<!-- Javascript -->
<script>
$(function ()
{
$("#obj").draggable(
{
containment: "#port",
scroll: false,
axis: 'x'
});
});
</script>
<!-- HTML -->
<div id="port">
<div id="obj">
<p>Drag me</p>
</div>
</div>
Here is a jsFiddle of the above : LINK