Estoy usando la función draggable de Jquery UI en varias divs y queria saber cómo puedo hacer para evitar que al mover un div y tratar de soltarlo fuera de su div padre(el div contenedor), en un espacio hotizontal. Es para evitar que este div no pueda estar posicionado en cierto espacio de la web: este es mi codigo:
$(document).ready(function(){
$(".caja1").draggable();
$(".caja1").resizable();
});
div.container
{
position: relative;
border:1px solid black;
padding-left: 10px;
}
div.caja1 {
width: 100px;
height: 100px;
position: relative;
}
div.caja1 {
background: rgb(83, 53, 117)
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div class="caja1" contenteditable="true">
caja 1
</div>
<div class="caja1" contenteditable="true">
caja 2
</div>
</div>
Cómo podria lograr esto? Solo quiero saber cómo hacer para que uno o más divs, no traspasen a su div padre, no se salgan de ese div padre.