1.拖拽:鼠标点击选中的元素后,移动鼠标,使得元素移动
2.拖拽相关的事件
① onmousedown : 操作的元素box
②onmousemove : 操作的元素 document
③onmouseup : 操作的元素 document
注意:onmousedown包含move和up,也就是说down了之后,才绑定了move和up事件
3.事件的拖拽版本一:
设置style:
#box {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
left: 200px;
top: 200px;
cursor: move;
}
设置主要内容:
<body>
<div id="box"></div>
</body>
js的设置:
//获取盒子元素
var oBox = document.querySelector("#box");
//构造鼠标移动事件的函数
oBox.onmousedown = function(evt) {
var e = evt || event;
var offsetX = e.offsetX;
var offsetY = e.offsetY;
document.onmousemove = function(evt) {
var e = evt || event;
oBox.style.left = e.pageX - offsetX + "px";
oBox.style.top = e.pageY - offsetY + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
效果图:
会出现的问题:碰壁之后不会停止移动
4.拖拽版本二
css设置:
#box {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
left: 200px;
top: 200px;
cursor: move;
}
主体设置;
<body>
<div id="box"></div>
</body>
js设置:
<script>
//获取盒子元素
var oBox = document.querySelector("#box");
//鼠标按下事件的函数构造
oBox.onmousedown = function(evt) {
//使用事件
var e = evt || event;
//获取鼠标的坐标
var offsetX = e.offsetX;
var offsetY = e.offsetY;
//鼠标移动事件的函数
document.onmousemove = function(evt) {
var e = evt || event;
//鼠标距离左边的距离
var left = e.pageX - offsetX;
//鼠标距离上边的距离
var top = e.pageY - offsetY;
//左边碰壁
if (left < 0) {
left = 0;
}
//盒子距离左边的最大距离
var maxLeft = innerWidth - oBox.offsetWidth;
//右边碰壁
if (left > maxLeft) {
left = maxLeft;
}
//上边碰壁
if (top < 0) {
top = 0;
}
//距离上边的最大距离
var maxTop = innerHeight - oBox.offsetHeight;
//下边碰壁
if (top > maxTop) {
top = maxTop;
}
//鼠标居中
oBox.style.left = left + "px";
oBox.style.top = top + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
//可视窗口的高,可视窗口的宽
console.log(innerWidth, innerHeight);
</script>
优点:这个就不会出现碰壁不停止现象。