jquery UI Draggable - prevent collision

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>

<div class="container">
    <div class="HRblock">
        <div class="HRslider"></div>
    </div>
    <div class="VRblock">
        <div class="VRslider"></div>
    </div>
</div>

CSS

div.container{
    width:300px;
    height:300px;
    position: absolute;
    left:3%;
    top:10%;
    z-index:10;
}
div.HRblock{
    width:100%;
    height:20%;
    position: absolute;
    left:0;
    top:0;
    z-index:100;
}
div.VRblock{
    width:20%;
    height:100%;
    position: absolute;
    left:0;
    bottom:0;
    z-index:100;
}
div.HRslider{
    width:50%;
    height:100%;
    border:1px solid #000000;
    position: absolute;
    top:0;
    z-index:1000;
}
div.VRslider{
    width:100%;
    height:50%;
    border:1px solid #000000;
    position: absolute;
    bottom:0;
    z-index:1000;
}

JavaScript

$(document).ready(function(){
    $(".HRslider").draggable({
        axis:"x",
        containment:".HRblock"
    });
    $(".VRslider").draggable({
        axis:"y",
        containment:".VRblock",
        drag: function( event, ui ) {
            console.log($('.HRslider').position().top + $('.HRslider').outerHeight(true) + ":" + ui.position.top)
          if(($('.HRslider').position().top + $('.HRslider').outerHeight(true)) >= ui.position.top)
 	    	 //event.preventDefault();
         console.log
         ;
  		}
    });
    
})