移动蒙版层
可在整个页面拖动方块，但方块不能超出页面
<!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 = 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 < 0 || e.clientY < 0) {
isDown = false;
}
}
},
'mouseup': function (e) {
this.isDown = false
this.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>