Draggable Constrain

Overview

The draggable object can only be moved within its parent container.

Setup

$('.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();
    }
  }
});

html

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