js div拖拽（在固定区域内显示）

 div { position: absolute;  100px; height: 100px; background:#f00; }

 <div></div>

 
<script type="text/javascript">
    var oDiv = document.querySelector("div");
    var cw = document.documentElement.clientWidth; //获取可视区域宽度
    var ch = document.documentElement.clientHeight; //获取可视区域高度
    var dw = oDiv.offsetWidth;  // 获取div的width+padding+border
    var dh = oDiv.offsetHeight; // 获取div的height+padding+border
    var mw = cw - dw; //计算div移动的最大宽度
    var mh = ch - dh; //计算div移动的最大高度
    oDiv.onmousedown = function (e) {
      var evt = e || event;
      var _x = evt.offsetX; //offsetX 鼠标距离事件源的左边距
      var _y = evt.offsetY; //offsetY 鼠标距离事件源的上边距
      document.onmousemove = function (e) {
        var evt = e || event;
        var x = evt.clientX - _x;
        var y = evt.clientY - _y;
        x = x < 0 ? 0 : x > mw ? mw : x;
        y = y < 0 ? 0 : y > mh ? mh : y;
        oDiv.style.left = x + "px";
        oDiv.style.top = y + "px";
      }
      document.onmouseup = function () {
        document.onmousemove = null;
      }
    }
    /* 注意：onmouseup、onmousemove事件必须加在document上，否则如果事件添加在div上，
       当鼠标移动过快移出div时，onmousemove、onmouseup事件会失效。 */
  </script>