js实现移动蒙版层

移动蒙版层

可在整个页面拖动方块，但方块不能超出页面

  
  
  移动蒙版层案例
  
    * {
      margin: 0;
      padding: 0;
    }
    body {
      position: relative;
    }
    .container {
      position: relative;
      top: 10px;
      left: 10px;
      width: 800px;
      height: 800px;
      background-color: #368;
    }
    .mask {
      position: absolute;
      width: 400px;
      height: 280px;
      padding: 20px;
      background-color: #690;
      box-shadow: 0 0 8px #222;
      cursor: move;
    }
  


 
    

    
 
  
  
    var oMask = $('.mask')
    var eventTypeMap = {
      isDown : false,
      startPos : {
        x : 0,
        y : 0,
        left : 0,
        top : 0
      },
      targetEle : null,
      limit : {
        maxLeft :window.innerWidth - oMask.offsetWidth,
        maxTop : window.innerHeight - oMask.offsetHeight,
      },
      'mousedown': function (e) {
        this.isDown = true
        this.targetEle = e.target
        this.startPos.x = e.clientX,
        this.startPos.y = e.clientY
        this.startPos.left = getPosition(oMask).left
        this.startPos.top = getPosition(oMask).top
      },
      'mousemove': function (e) {
        if(this.isDown === true) {
          var diffX = e.clientX - this.startPos.x
          var diffY = e.clientY - this.startPos.y
          var diffLeft = this.startPos.left + diffX
          var diffTop = this.startPos.top + diffY
          diffLeft = Math.max(0, diffLeft)
          diffLeft = Math.min(this.limit.maxLeft, diffLeft)
          diffTop = Math.max(0, diffTop)
          diffTop = Math.min(this.limit.maxTop, diffTop)
          setStyle(oMask, {
            top : diffTop + 'px',
            left : diffLeft + 'px',
           
          })
          if (e.clientX