Javascript 自定义div可拖动函数-窗口边界？

我正在使用以下函数通过句柄拖动div：

function enableDragging(ele) {
    var dragging = dragging || false,
        x, y, Ox, Oy,
        current;
    enableDragging.z = enableDragging.z || 1;
    var grabber = document.getElementById("wrapId");
    grabber.onmousedown = function (ev) {
        ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        current = target.parentNode;
        dragging = true;
        x = ev.clientX;
        y = ev.clientY;
        Ox = current.offsetLeft;
        Oy = current.offsetTop;
        current.style.zIndex = ++enableDragging.z;

        document.onmousemove = function (ev) {
            ev = ev || window.event;
            pauseEvent(ev);
            if (dragging == true) {

                var Sx = ev.clientX - x + Ox,
                    Sy = ev.clientY - y + Oy;

                current.style.left = Math.max(Sx, Math.min(document.body.offsetWidth - Sx, 0)) + "px";
                current.style.top = Math.max(Sy, Math.min(document.body.offsetHeight - Sy, 0)) + "px";
                document.body.focus();
                document.onselectstart = function () {
                    return false;
                };
                ev.ondragstart = function () {
                    return false;
                };
                document.body.style.MozUserSelect = "none";
                document.body.style.cursor = "default";
                return false;
            }
        }
        document.ondragstart = function () {
            return false;
        }
        document.onmouseup = function (ev) {
            ev = ev || window.event;
            dragging && (dragging = false);
            if (ev.preventDefault) {
                ev.preventDefault();
            } else {
                e.cancelBubble = true;
                e.returnValue = false;
            }

            document.body.style.MozUserSelect = "text";
            document.body.style.cursor = "default";
            //toggleEnableSelectStart(true);
            return false;
        }
    };
}

我试图设置边界，使div不能被拖动到实际浏览器窗口的边界之外

上面的函数完成了50%，它不会让用户将div拖到左上和左上边界之外。但是，它让用户将其拖到底部和右侧之外

---

有没有办法解决这个问题？

取你用窗口的宽度/高度边界计算的值减去div的宽度/高度之间的最小值：

current.style.left = Math.min(Math.max(Sx, Math.min(document.body.offsetWidth - Sx, 0)), document.body.offsetWidth - current.offsetWidth) + "px";
current.style.top = Math.min(Math.max(Sy, Math.min(document.body.offsetHeight - Sy, 0)), document.body.offsetHeight - current.offsetHeight) + "px";

编辑：

大致是这样的（记住，这是很快写出来的，格式和你的不一样！）

---

对不起，考虑到div的宽度，我可以拖拽右边的和底部的div，只有顶部和左边的边界工作：/@ Alosyius，抱歉不清楚，希望小提琴能详细说明。