在这里插入代码片
```//1.学会自己对不会的自己查询2.分析每行代码的意思,由少到多慢慢学。3.鼠标按下和松开时所用的事件代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标拖拽事件</title>
</head>
<body>
<div id="box" class="box">
<div id="drop" class="hd">注册信息(可以拖拽)
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
<script>
var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event){
var event =event || window.event;
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
var spaceX = pageX -box.offsetLeft;
var spaceY = pageY -box.offsetTOP;
};
document.onmousemove = function (event){
var event = event || window.event;
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
box.style.left = pageX - spaceX +'px';
box.style.top =pageY -spaceY +'px';
if(window.getSelection){
window.getSelection().removeAllRanges();
}else{
document.selection.empty();
}
};
</script>
</body>
鼠标事件代码
最新推荐文章于 2023-05-25 11:13:54 发布