演示效果:
说明:
结合使用mousedown、mousemove、mouseup三个事件,调用事件自带的event参数下的offsetX、offsetY、pageX、pageY,实现按住拖动模块效果
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<style>
div {
cursor: pointer;
position: absolute;
float: left;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-top: -50px;
}
.box1 {
background: lightcoral;
margin-left: -150px;
}
.box2 {
background: lightblue;
bor