原生js实现一个拖拽，带过界判断。

话不多说直接上代码

  div class="calculator" id="drag">

//html代码 .calculator { //样式代码 position: absolute; /*设置绝对定位，脱离文档流，便于拖拽*/ display: block; width: 100px; height: 100px; background-color: #d6655c; cursor: move; /*鼠标呈拖拽状*/ }

---

  var drag = document.getElementById('drag');
  //点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象
  drag.onmousedown = function(e) {
      var e = e || window.event;
      var diffX = e.clientX - drag.offsetLeft;//鼠标按下那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 
      var diffY = e.clientY - drag.offsetTop;//同理计算距相对上边框位置

      document.onmousemove = function(e) {
          var e = e || window.event;
          var left = e.clientX - diffX;//计算左边距
          var top = e.clientY - diffY; //计算右边距

          if (left < 0) {  //过界判断
              left = 0; //从左边移出浏览器窗口
          } else if (left > window.innerWidth - drag.offsetWidth) {
              left = window.innerWidth - drag.offsetWidth;//从右边移出浏览器窗口
          }
          if (top < 0) {
              top = 0; //从上边移出浏览器窗口
          } else if (top > window.innerHeight - drag.offsetHeight) {
              top = window.innerHeight - drag.offsetHeight;  //从下面移出浏览器窗口
          }

          drag.style.left = left + 'px';
          drag.style.top = top + 'px';
      }

      document.onmouseup = function(e) { //移除事件，让物体停下
          this.onmousemove = null;
          this.onmouseup = null;
      }
  }