<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="../recourse/jQuery/jquery-2.2.3.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
position:relative;
z-index:1000;
}
div {
position:absolute;
z-index:2000;
width:100px;
height:100px;
}
.drag {
background-color:blue;
top:0;
left:0;
}
.hit {
background-color:red;
top:100px;
left:200px;
}
</style>
</head>
<body>
<div class="drag"></div>
<div class="hit"></div>
<script type="text/javascript">
(function() {
let drag = $('.drag');
let hit = $('.hit');
drag.on('mousedown', function(e) {
let disX = e.pageX - $(this).position().left;
let disY = e.pageY - $(this).position().top;
$(document).on('mousemove', function(e) {
drag.css({
'left': e.pageX - disX + 'px',
'top': e.pageY - disY + 'px'
});
collisionJq(drag, hit);
});
$(document).on('mouseup', function() {
$(this).off('mousemove mouseup');
});
});
//碰撞检测
function collisionJq(dragEl, hitEl) {
let dragOff = dragEl.offset();
let hitOff = hitEl.offset();
if (dragOff.left + dragEl.outerWidth() < hitOff.left ||
dragOff.top + dragEl.outerHeight() < hitOff.top ||
dragOff.left > hitOff.left + hitEl.outerWidth() ||
dragOff.top > hitOff.top + hitEl.outerHeight()) {
//没碰到
console.log('没碰到');
return false;
} else {
//碰到了
console.log('碰到了');
return true;
}
};
})();
</script>
</body>
</html>