Move box around parent div

Question

I have an assignment where I have to create two boxes, one inside of the other. The smaller(inside) box is supposed to be able to move freely with a mousedrag inside of the container box. The smaller box is not supposed to be able to leave the larger box. I have figured out the first part(moving the box) but can't quite figure out the second? I'm sure I'm just overlooking something simple, so any tips would be appreciated. This is my code.

window.onload = init;
var mousePiece = null;

function init() {
    var box = document.getElementById("box");
    container = document.getElementById("container");

    box.style.top = getStyle(box,"top");
    box.style.left = getStyle(box,"left");
    box.style.height = getStyle(box,"height");
    box.style.width = getStyle(box,"width");

    container.style.top = getStyle(container,"top");
    container.style.left = getStyle(container,"left");
    container.style.height = getStyle(container,"height");
    container.style.width = getStyle(container,"width");


    addEvent(box, "mousedown", mouseGrab, false);
}

function mouseGrab(e) {
    var evt = e || window.event;
    mousePiece = evt.target || evt.srcElement;

    addEvent(document, "mousemove", mouseMove, false);
    addEvent(document, "mouseup", mouseDrop, false);
}

function mouseMove(e) {
    var evt = e || window.event;
    var mouseX = evt.clientX;
    var mouseY = evt.clientY;

        mousePiece.style.left = mouseX - 25 + "px";
        mousePiece.style.top = mouseY - 25 + "px";
}

function mouseDrop(e) {
    mousePiece = null;
    removeEvent(document, "mousemove", mouseMove, false);
    removeEvent(document, "mouseup", mouseDrop, false);
}

function addEvent(object, evName, fnName, cap) {
    if (object.attachEvent)
        object.attachEvent("on" + evName, fnName);
    else if (object.addEventListener)
        object.addEventListener(evName, fnName, cap);
}

function removeEvent(object, evName, fnName, cap) {
    if (object.detachEvent)
        object.detachEvent("on" + evName, fnName);
    else if (object.removeEventListener)
        object.removeEventListener(evName, fnName, cap);
}

function getStyle(object, styleName) {
    if (window.getComputedStyle) {
        return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
    } else if (object.currentStyle) {
        return object.currentStyle[styleName]
    }
}

Thanks, Jesse.

Answer 1

In your mousemove function you must test to see if the new position falls outside of the container, and if it does change the values before assigning it to the box.

See http://jsfiddle.net/gaby/eutk9u48/

---

Explanation of fiddle

Inside the init function we fill an object named limit ( which is declared at the top ) with the left/top/right/bottom positions of the container ( for easy reference )

// parseInt is used to get the numbers without the 'px' at the end
// so we can perform numeric comparisons with it
limits.top = parseInt(container.style.top); 
limits.left = parseInt(container.style.left);
limits.right = limits.left + parseInt(container.style.width);
limits.bottom = limits.top + parseInt(container.style.height);

Then in the mousemove method we do

var newX = mouseX - 25; // store the new X position based on mouse
var newY = mouseY - 25; // store the new Y position based on mouse

// make sure the newX does not go past the right side of the container
// by keeping whichever is smaller 
// if the newX we got from the mouse is larger than the right side of the container
// then we force the newX to become equal to the right side.
newX = Math.min(newX, limits.right); 

// The same principle applies to the left side but we now need to keep the larger value
// of newX or the left side of the container
newX = Math.max(newX, limits.left);

// same logic for top/bottom 
newY = Math.min(newY, limits.bottom);
newY = Math.max(newY, limits.top);