Cómo puedo evitar que un div pueda pasar por encima de otro al hacer drop o sea que no traspase al otro div y respete la posición del otro.
$(document).ready(function(){
$(".draggable").draggable();
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="draggable" style="width:100px; background:blue; color:white">
Primer div
</div><br>
<div class="draggable" style="width:100px; background:blue; color:white">
Segudndo div
</div>