var oBox = document.querySelector(".box");

var owrap = document.querySelector("#wrap");

oBox.onmousedown = function(ev) {

    var ev = window.event || ev;

    var disX = ev.clientX - this.offsetLeft;

    var disY = ev.clientY - this.offsetTop;

    document.onmousemove = function(ev) {

        var ev = window.event || ev;

        var L = ev.clientX - disX;

        var T = ev.clientY - disY;

        if (L < 0) {

            L = 0

        } else if (L > owrap.offsetWidth - oBox.offsetWidth) {

            L = owrap.offsetWidth - oBox.offsetWidth

        }

        if (T < 0) {

            T = 0

        } else if (T > owrap.offsetWidth - oBox.offsetHeight) {

            T = owrap.offsetWidth - oBox.offsetHeight;

        }

        oBox.style.left = L + "px";

        oBox.style.top = T + "px";

    }

    document.onmouseup = function() {

        document.onmousemove = null;

        document.onmouseup = null;

    }

}