<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
position: absolute;
}
.layer1{
background-color: red;
top: 100px;
left: 60px;
/*z-index的值越大就越靠上层, 最大就在最上层*/
/*z-index: 3;*/
}
.layer2{
background-color: yellowgreen;
top: 50px;
left: 130px;
/*z-index: 4;*/
}
.layer3{
background-color: yellow;
/*z-index: 1;*/
}
</style>
</head>
<body>
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//1.点击标签事件
var max = 4
isMove = false
oldOffsetX = 0
oldOffsetY = 0
moveNode = null
$('body').on('mousedown','div',function(evt){
//切换层次
max++
$(this).css('z-index', max)
isMove = true
//保存按下的时候鼠标在div上的位置
oldOffsetX = evt.offsetX
oldOffsetY = evt.offsetY
moveNode = $(this)
})
$('body').on('mouseup','div', function(){
isMove = false
})
$(document).on('mousemove',function(evt){
if(!isMove){
return
}
//移动
moveNode.css({
'left':evt.clientX - oldOffsetX + 'px',
'top': evt.clientY - oldOffsetY + 'px'
})
})
</script>
</body>
</html>
image.png
网友评论