The draggable object can only be moved within its parent container.
$('.draggable').hqyDraggable({ onDrag: function (e, target) { var data = e.data; var $target = $(target), $parent = $target.parent(); data.left = Math.max(0, data.left); data.top = Math.max(0, data.top); if (data.left + $target.outerWidth() > $parent.width()){ data.left = $parent.width() - $target.outerWidth(); } if (data.top + $target.outerHeight() > $parent.height()){ data.top = $parent.height() - $target.outerHeight(); } } });
<div style="position:relative;overflow:hidden;height:310px;border: 1px solid #ccc;"> <div class="draggable" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;"></div> </div>