Как ограничить 1 div, чтобы не идти дальше определенной длины от другого div?

Самый простой способ, который я могу придумать, - обернуть перетаскиваемый элемент абсолютно позиционированного (так, чтобы он вышел из нормального потока и не повлиял на остальную часть вашего макета), которая больше, чем .holder на n пикселей (вы можете достичь установив его в top, right, bottom, left свойствах на -n) и установите его как оболочку перетаскиваемого.

$('.drag').draggable({
  containment: ".containment"
});

.holder {
  position: relative;
  top: 100px; /*only for demo prpose*/
  width: 200px;
  height: 200px;
  margin: 0px auto;
  background: red;
}
.containment {
  position: absolute;
  top: -30px;
  right: -30px;
  bottom: -30px;
  left: -30px;
  outline: 1px solid dodgerblue; /*only for demo prpose*/
}
.drag {
  width: 20px;
  height: 40px;
  background: blue;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="holder">
  <div class="containment">
    <div class="drag"></div>
  </div>
</div>

jsFiddle => http://jsfiddle.net/u9f465h0/4/

var holderPos = {};
holderPos.width = $('.holder').outerWidth(true);
holderPos.height = $('.holder').outerHeight(true);

$('.drag').draggable({ 
  start: function() { 
         $('.drag').draggable({revert:false}); 
  },
 drag: function(event, ui) {
       if(ui.position.left<-30) {
            $('.drag').draggable({revert:true});
            return false;
       }
       else if(ui.position.top<-30) {
            $('.drag').draggable({revert:true});
            return false;
       }
       else if(ui.position.top>(10+holderPos.height)) { 
            $('.drag').draggable({revert:true});  
            return false;
       }             
       else if(ui.position.left>(10+holderPos.width))  {
            $('.drag').draggable({revert:true});
            return false;
       }                                          
 }

});

Для кода выше Вы можете изменить скорость возврата:

$( ".selector" ).draggable({ revertDuration: 200 });

Для сохранения объекта draggable в div-коде выше Вы можете использовать только этот код:

$(".drag").draggable ({ containment : ".holder" });  //for hold drag in div.holder

Попробуй это:

var distance;
$(".drag").draggable({
    drag: function(event, ui){
        distance = // calculate distance between divs here
        if(distance > 30) return false;
    }
});

См. Страницу событий на jQueryui.com

См. ЭТУ FIDDLE. В этом случае синий div можно перемещать только в диапазоне 30px от родителя.