js实现移动蒙版层

移动蒙版层

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>移动蒙版层案例</title><style>* {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;}</style>
</head><body><div class="mask"></div><script src='js/common.js'></script><script>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 = truethis.targetEle = e.targetthis.startPos.x = e.clientX,this.startPos.y = e.clientYthis.startPos.left = getPosition(oMask).leftthis.startPos.top = getPosition(oMask).top},'mousemove': function (e) {if(this.isDown === true) {var diffX = e.clientX - this.startPos.xvar diffY = e.clientY - this.startPos.yvar diffLeft = this.startPos.left + diffXvar diffTop = this.startPos.top + diffYdiffLeft = 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 < 0 || e.clientY < 0) {isDown = false;}}},'mouseup': function (e) {this.isDown = falsethis.targetEle = null},}oMask.addEventListener('mousedown' , drawEle, false)document.addEventListener('mousemove' , drawEle, false)document.addEventListener('mouseup' , drawEle, false)function drawEle (e) {if(eventTypeMap[e.type] && typeof eventTypeMap[e.type] === 'function') {eventTypeMap[e.type](e)}}</script>
</body></html>