div在一個區域拖動

<script>

    window.onload = function() {
        var oDiv = document.getElementById('div1');
        // var oParent = document.getElementById('app');
        var oParent = document.getElementsByClassName("el-main")[0];
        var sent = {
            l: 0,
            r: oParent.offsetWidth - oDiv.offsetWidth,
            t: 0,
            b: oParent.offsetHeight - oDiv.offsetHeight,
            n: 10
        }
        drag(oDiv, sent);
    }
    function drag(obj, sent) {
        var dmW = document.documentElement.clientWidth || document.body.clientWidth;
        var dmH = document.documentElement.clientHeight || document.body.clientHeight;
        var sent = sent || {};
        var l = sent.l || 0;
        var r = sent.r || dmW - obj.offsetWidth;
        var t = sent.t || 0;
        var b = sent.b || dmH - obj.offsetHeight;
        var n = sent.n || 10;
        obj.onmousedown = function(ev) {
            var oEvent = ev || event;
            var sentX = oEvent.clientX - obj.offsetLeft;
            var sentY = oEvent.clientY - obj.offsetTop;
            document.onmousemove = function(ev) {
                var oEvent = ev || event;
                var slideLeft = oEvent.clientX - sentX;
                var slideTop = oEvent.clientY - sentY;
                if (slideLeft <= l) {
                    slideLeft = l;
                }
                if (slideLeft >= r) {
                    slideLeft = r;
                }
                if (slideTop <= t) {
                    slideTop = t;
                }
                if (slideTop >= b) {
                    slideTop = b;
                }
                obj.style.left = slideLeft + 'px';
                obj.style.top = slideTop + 'px';
            }
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            }
            return false;
        }
    }
    function pagge() {}
</script>

　　http://www.jq22.com/demo/drag20151029/