javascript - Smooth scroll UI draggable -

i'm having problem jquery ui draggable..

i scroll element within smaller parent element, creates kind of viewport.

however, i'm having issue element being dragged it's snapping edges of port.

been battling while use help... please :)

here example of behaviour i'm trying : link

here jsfiddle : link

and 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> 

demo

hope need, since specified axis:x , move in x axis

$(function () {     $("#obj").draggable({          scroll: false,         axis: 'x',      }); });