js 拖拽
2020-10-06 本文已影响0人
lucky_yao
1：鼠标在元素上的坐标位置
offsetX
offsetY
2:鼠标在浏览器（可视窗口）上的坐标位置
clientX
clientY
3：事件
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标弹起
4:可视窗口的宽度和高度
document.documentElement.clientWidth
document.documentElement.clientHeight
5:获取元素的宽高
offsetWidth
offsetHeight
6:获取元素到浏览器窗口的距离
offsetLeft
offsetTop
7:函数封装
<1>:被函数包裹的可以重复使用的代码就叫函数的封装
8:函数封装
<1>:可以减少代码量，减少冗余重复代码，提高代码运行速度，提高工作效率
9:函数封装思路
<1>:把重复提取出来，用函数包裹
<2>:找出代码中相同的元素，用形参代替
<3>:改错
10：简单拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background: #006400;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
var obox=document.getElementsByClassName('box')[0];
// onmousedown 鼠标按下事件
// onmousemove 鼠标移动事件
// onmouseup 鼠标弹起事件
obox.onmousedown=function(e){
var e=e||window.event;
var x=e.offsetX;
var y=e.offsetY;
document.onmousemove=function(e){
var e=e||window.event;
obox.style.left=e.clientX-x+'px';
obox.style.top=e.clientY-y+'px';
}
}
obox.onmouseup=function(){
document.onmousemove='null';
}
</script>
</html>
11:函数的封装
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background: #006400;
position: absolute;
}
.box1 {
width: 100px;
height: 100px;
background: #0000FF;
position: absolute;
top: 300px;
}
.box2 {
width: 50px;
height: 50px;
background: #00FFFF;
position: absolute;
top: 500px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
<script type="text/javascript">
var obox = document.getElementsByClassName('box')[0];
var obox1 = document.getElementsByClassName('box1')[0];
var obox2 = document.getElementsByClassName('box2')[0];
// onmousedown 鼠标按下事件
// onmousemove 鼠标移动事件
// onmouseup 鼠标弹起事件
move(obox1)
move(obox)
move(obox2)
// 函数封装思路
// 1:把重复代码提取出来,用函数包裹
// 2:抽取代码中相同点/或者相同的元素,改成函数的形参
// 3:改错
// 开始对重复代码就行函数的封装
function move(obj) {
obj.onmousedown = function(e) {
var e = e || window.event;
x = e.offsetX; //获取光标在div元素的坐标位置
y = e.offsetY;
document.onmousemove = function(e) {
var e = e || window.event;
l = e.clientX - x;
t = e.clientY - y;
//l是div元素到浏览器左边的距离
//t是div元素到浏览器上边的距离
if (l < 0) {
l = 0;
}
if (l > document.documentElement.clientWidth - obj.offsetWidth) {
l = document.documentElement.clientWidth - obj.offsetWidth;
}
if (t < 0) {
t = 0;
}
if (t > document.documentElement.clientHeight - obj.offsetHeight) {
t = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = l + 'px';
obj.style.top = t + 'px';
}
}
obj.onmouseup = function() {
document.onmousemove = 0;
}
}
</script>
</html>
12:碰撞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box_1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#box_2{
width: 100px;
height: 100px;
background: yellow;
position: fixed;
top:300px;
left:300px;
}
</style>
</head>
<body>
<div id="box_1"></div>
<div id="box_2"></div>
</body>
<script type="text/javascript">
var obox=document.getElementById('box_1');
var obox_2=document.getElementById('box_2');
obox.onmousedown=function(e){
var e=e||window.event;
var x=e.offsetX;
var y=e.offsetY;
document.onmousemove=function(e){
var e=e||window.event;
l = e.clientX - x;
t = e.clientY - y;
if (l < 0) {
l = 0;
}
if (l > document.documentElement.clientWidth - obox.offsetWidth) {
l = document.documentElement.clientWidth - obox.offsetWidth;
}
if (t < 0) {
t = 0;
}
if (t > document.documentElement.clientHeight - obox.offsetHeight) {
t = document.documentElement.clientHeight - obox.offsetHeight;
}
obox.style.left = l + 'px';
obox.style.top = t + 'px';
var obox_b=obox.offsetHeight+obox.offsetTop;
var obox_t=obox.offsetTop;
var obox_l=obox.offsetLeft;
var obox_r=obox.offsetWidth+obox.offsetLeft;
var obox_2_t=obox_2.offsetTop;
var obox_2_b=obox_2.offsetHeight+obox_2.offsetTop;
var obox_2_l=obox_2.offsetLeft;
var obox_2_r=obox_2.offsetWidth+obox_2.offsetLeft;
if(obox_b<obox_2_t||obox_t>obox_2_b||obox_l>obox_2_r||obox_r<obox_2_l){
obox_2.style.background='yellow';
}else{
obox_2.style.background='blue';
}
}
}
obox.onmouseup=function(){
document.onmousemove=null;
}
</script>
</html>
