自定義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/