title: JavaScript drag and Snap to browser window
body: <p>I want to modify the below function to be able to not just have drag bounds of the browser window, but also "snap" to it when the drag is 15px away from the bounds.</p>
  
  <p>Zopim has this in their chat widget, see: <code>http://zopim.com</code> 
  (Click on the chat icon on the bottom right corner and start dragging the widget to the end of your browser window)</p>
  
  <p>My current function is here: <a href="http://jsfiddle.net/N6A4q/" rel="nofollow">http://jsfiddle.net/N6A4q/</a></p>
  
  <p>Code:</p>
  
  <pre><code>function enableDragging(ele) {
  
      var dragging = dragging || false,
          x, y, Ox, Oy,
          current;
  
      enableDragging.z = enableDragging.z || 1;
      var grabber = ele;
      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;
          // cached value
          var viewportWidth = viewport().width;
          var viewportHeight = viewport().height;
  
          document.onmousemove = function (ev) {
              ev = ev || window.event;
  
              if (dragging == true) {
                  var Sx = parseFloat(ev.clientX) - x + Ox;
                  var Sy = parseFloat(ev.clientY) - y + Oy;
                  current.style.left = Math.min(Math.max(Sx, Math.min(viewportWidth - Sx, 0)), viewportWidth - current.offsetWidth) + "px";
                  current.style.top = Math.min(Math.max(Sy, Math.min(viewportHeight - Sy, 0)), viewportHeight - current.offsetHeight) + "px";
              }
          }
  
          document.onselectstart = function () {
              return false;
          };
  
          document.onmouseup = function (ev) {
              ev = ev || window.event;
              dragging &amp;&amp; (dragging = false);
              if (ev.preventDefault) {
                  ev.preventDefault();
              }
          }
  
          document.body.style.MozUserSelect = "none";
          document.body.style.cursor = "default";
  
          return false;
      };
  }
  
  function viewport() {
      var e = window
      , a = 'inner';
      if ( !( 'innerWidth' in window ) ) {
          a = 'client';
          e = document.documentElement || document.body;
      }
      return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
  } 
  </code></pre>
  
  <p>How could i make this snap the the bounds of the window in the same way?</p>
  
  <p>Any ideas?</p>