目录
如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻烦,升级版如下:
想法:①把所有onmousedown/onmousemove/onmouseup修改为addEventListener()
②希望页面中的元素只要含有drag这个class的就可以被拖拽
一:案例鼠标拖拽小方块,小方格跟着移动(桌面图标拖动)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
#a {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="box"></div> <!-- 第二个盒子测试第三步的鼠标松开时应该给document添加事件,而不是box -->
<div id="a"></div>
<script>
/*
通过鼠标,拖拽box移动
1.当鼠标在box1上按下时,功能开始 (mousedown)
2.鼠标移动,box跟随鼠标一起移动 (mousemove)
3.鼠标松开,功能结束, (mouseup)
box1固定在当前位置不再跟随鼠标移动
*/
let box = document.getElementById('box')
//1.当鼠标在box1上按下时,功能开始(mousedown)
box.onmousedown = function (event2) {
let left = event2.clientX - box.offsetLeft;
let top = event2.clientY - box.offsetTop;
//2.鼠标移动,box跟随鼠标一起移动(mousemove)
document.onmousemove = function (event) {
box.style.left = event.clientX - left + 'px'
box.style.top = event.clientY - top + 'px'
}
//3.鼠标松开,功能结束(mouseup)
//第二步的事件取消了,小方块就不会移动了
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
</body>
</html>
二:取消拖拽文字的行为
就是取消文字拖拽...
1.没取消前:
2.取消后:
三:鼠标拖拽案例优化:
如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻烦,升级版如下:
想法:①把所有onmousedown/onmousemove/onmouseup修改为addEventListener()
②希望页面中的元素只要含有drag这个class的就可以被拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1,
#box2,
#box3 {
width: 100px;
height: 100px;
background-color: pink;
}
/*添加拖动事件的盒子添加定位来移动 */
.drag {
position: absolute;
}
#a {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 100px;
left: 100px;
}
#box2 {
top: 200px;
background-color: rgb(109, 6, 140);
}
#box3 {
left: 200px;
background-color: rgb(179, 233, 31);
}
</style>
</head>
<body>
取消文字拖拽
<div id="box1" class="drag"></div> <!-- 第二个盒子测试第三步的鼠标松开时应该给document添加事件,而不是box -->
<div id="a"></div>
<!-- 我们都需要设置拖拽效果 -->
<div id="box2" class="drag"></div>
<div id="box3" class="drag"></div>
<script>
/*
通过鼠标,拖拽box移动
1.当鼠标在box1上按下时,功能开始 (mousedown)
2.鼠标移动,box跟随鼠标一起移动 (mousemove)
3.鼠标松开,功能结束, (mouseup)
box1固定在当前位置不再跟随鼠标移动
*/
// 二:方别的拖拽设置
/*
如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻烦,升级版如下:
想法:①把所有onmousedown/onmousemove/onmouseup修改为addEventListener()
②希望页面中的元素只要含有drag这个class的就可以被拖拽
*/
(function () {
let drags = null;
let left;
let top;
let box1 = document.getElementById('box1')
let box2 = document.getElementById('box2')
let box3 = document.getElementById('box3')
//1.当鼠标在box1上按下时,功能开始(mousedown)
document.addEventListener('mousedown', function (event1) {
if (event.target.classList.contains('drag')) {
event.preventDefault();
drags = event.target;
left = event1.clientX - drags.offsetLeft;
top = event1.clientY - drags.offsetTop;
}
})
//2.鼠标移动,box跟随鼠标一起移动(mousemove)
document.addEventListener('mousemove', function (event2) {
if (drags) {
drags.style.left = event2.clientX - left + 'px';
drags.style.top = event2.clientY - top + 'px';
}
})
//3.鼠标松开,功能结束(mouseup)
//第二步的事件取消了,小方块就不会移动了
document.addEventListener('mouseup', function () {
drags = null
})
})()
</script>
</body>
</html>