自定义div可拖动功能 - 窗口边界？

Question

我使用下面的函数通过手柄拖动一个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; 
     } 
    }; 
} 

我想边界设置为股利不能实际的浏览器窗口的界限之外拖动。

上面的函数完成了这个的50％，它不会让用户拖动左上角和左下界外的div。然而，它将用户拖到底部和右侧。

任何想法如何解决这个问题？

Answer 1

带你曾与窗口的宽度/高度边界减去/股利的高度宽度计算出的值之间的最小：

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"; 

编辑：

沿着这些东西（请注意，这是快速编写的，与您的格式不一样！）

http://jsfiddle.net/WKLa7/1/