JavaScript의 마우스 드래그 이벤트
- PHPz앞으로
- 2016-05-16 19:27:201167검색
이 글은 주로 JavaScript의 마우스 드래그 이벤트에 대해 다루고 있습니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
첫 번째 단계는 드래그된 요소가 절대적 위치에 있는지 아니면 상대적 위치에 있는지 정의하는 것입니다.
두 번째 단계는 여러 좌표의 개념을 명확히 하는 것입니다. 마우스를 눌렀을 때 포인터 좌표(이벤트) .pageX 및 event.pageY), 마우스를 놓을 때의 포인터 좌표, 드래그 앤 드롭한 요소의 원래 좌표, 드래그 앤 드롭 후 요소의 좌표
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
position:absolute;
width:200px;
height:200px;
overflow:hidden;
padding:4px;
border:solid 4px #59F182;}
#box img {width:100%;}
</style>
<script></script>
</head>
<body>
<p id="box" ><img src="images/bg.jpg" /></p>
<script>
// 初始化拖放对象
var box = document.getElementById("box");
// 获取页面中被拖放元素的引用指针
box.style.position = "absolute"; // 绝对定位
// 初始化变量，标准化事件对象
var mx, my, ox, oy; // 定义备用变量
function e(event){ // 定义事件对象标准化函数
if( ! event){ // 兼容IE浏览器
event = window.event;
event.target = event.srcElement;
event.layerX = event.offsetX;
event.layerY = event.offsetY;
}
event.mx = event.pageX || event.clientX + document.body.scrollLeft;
// 计算鼠标指针的x轴距离
event.my = event.pageY || event.clientY + document.body.scrollTop;
// 计算鼠标指针的y轴距离
return event; // 返回标准化的事件对象
}
// 定义鼠标事件处理函数
document.onmousedown = function(event){ // 按下鼠标时，初始化处理
event = e(event); // 获取标准事件对象
o = event.target; // 获取当前拖放的元素
ox = parseInt(o.offsetLeft); // 拖放元素的x轴坐标
oy = parseInt(o.offsetTop); // 拖放元素的y轴坐标
mx = event.mx; // 按下鼠标指针的x轴坐标
my = event.my; // 按下鼠标指针的y轴坐标
document.onmousemove = move; // 注册鼠标移动事件处理函数
document.onmouseup = stop; // 注册松开鼠标事件处理函数
}
function move(event){ // 鼠标移动处理函数
event = e(event);
o.style.left = ox + event.mx - mx + "px"; // 定义拖动元素的x轴距离
o.style.top = oy + event.my - my + "px"; // 定义拖动元素的y轴距离
}
function stop(event){ // 松开鼠标处理函数
event = e(event);
ox = parseInt(o.offsetLeft); // 记录拖放元素的x轴坐标
oy = parseInt(o.offsetTop); // 记录拖放元素的y轴坐标
mx = event.mx ; // 记录鼠标指针的x轴坐标
my = event.my ; // 记录鼠标指针的y轴坐标
o = document.onmousemove = document.onmouseup = null;
// 释放所有操作对象
}
</script>
</body>
</html>
더 많은 관련 튜토리얼 보기 , JavaScript 비디오 튜토리얼
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제