Flyt div rundt med musen inden i en anden div.

Jeg vil gerne lave en rammen med et div element (div01), hvor i jeg har et andet og større div element (div02), som jeg kan flytte rundt med ved brug af musen.

Jeg vil gerne have det sådan at det kun er den del af div02, som er inden for div01's ramme der er synlig, samt at man ikke kan flytte div02 ud af div01's ramme.

Jeg har forsøgt med nedenstående script, men man kan stadig se den del div02 som er udenfor div01's ramme, samt flytte den rundt på hele skærmen.. 



<style>
#div01{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    color: blue;
    border-color: black;
    border-style: solid;
    z-index: 2;
}
#div02{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 300px;
    height: 188px;
    background-color:yellow;
    color: blue;
    z-index: 1;
}
</style>

<div id="div01">
    <div id="div02">
       
    </div>
</div>

<script>
var mousePosition;
var offset = [0,0];
var div1;
var isDown = false;

div1 = document.getElementById("div02");

document.body.appendChild(div1);

div1.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        div1.offsetLeft - e.clientX,
        div1.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {
            x : event.clientX,
            y : event.clientY
        };
        div1.style.left = (mousePosition.x + offset[0]) + 'px';
        div1.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);
</script>