Держите перетаскиваемый div внутри его родителя

У меня есть перетаскиваемый тег div, и я бы не хотел, чтобы он переполнялся родительским элементом при перетаскивании.

<script>
    $('.children').resizeable().draggable();//from jquerUI
</script>

<style>
   .parent{
        overflow: hidden;
        position: relative;
        width: 1000px;
        height: 1000px;
    }
   .children{
        width: 100px;
        height: 100px;
        position: absolute;
    }
</style>

<div class="parent">
   <div class="children"><div>
</div>

Как я могу ограничить положение и размер детей внутри родителя.