JavaScript 마우스 드래그 이벤트 구현 사례 연구
- 黄舟원래의
- 2017-09-28 10:30:462107검색
이 글은 주로 javaScript를 사용하여 마우스 드래그 이벤트를 구현하는 것과 관련된 정보를 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
이 글의 예제는 js에서 마우스 드래그 이벤트를 구현하는 방법을 공유합니다. . 구체적인 코드는 참고용입니다. 구체적인 내용은 다음과 같습니다
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
p{
position: absolute;
top: 200px;/*p的y轴*/
left: 150px;/*p的x轴*/
width: 300px;
height: 200px;
background-color: gray;
}
p:hover{
cursor: move;
}
</style>
<script>
/*
* 分析：
* 获取鼠标实时移动的坐标；m_move_x,m_move_y
* 鼠标按下时的坐标；m_down_x,m_down_y
* p的坐标；dx,dy
* 鼠标按下时，鼠标与p的偏移量；md_x,md_y
* p的新坐标；ndx,ndy
*/
var isDown = false;//记录鼠标状态
var move_p ;//要操作的p对象
var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;
//鼠标按下
function down(){
move_p = document.getElementById("move_p");
isDown = true;
//获取鼠标按下时坐标
m_down_x = event.pageX;
m_down_y = event.pageY;
//获取p坐标
dx = move_p.offsetLeft;
dy = move_p.offsetTop;
//获取鼠标与p偏移量
md_x = m_down_x - dx;
md_y = m_down_y - dy;
}
//鼠标移动
function move(){
move_p = document.getElementById("move_p");
//实时更新p的坐标
dx = move_p.offsetLeft;
dy = move_p.offsetTop;
//获取鼠标移动实时坐标
m_move_x = event.pageX;
m_move_y = event.pageY;
//鼠标按下时移动才触发
if(isDown){
//获取新p坐标，鼠标实时坐标 - 鼠标与p的偏移量
ndx = m_move_x - md_x;
ndy = m_move_y - md_y;
//把新p坐标值赋给p对象
move_p.style.left = ndx+"px";
move_p.style.top = ndy+"px";
}
}
//鼠标释放
function up(){
isDown = false;
}
</script>
</head>
<body>
<p id="move_p" onmousedown="down()" onmouseup="up()" onmousemove="move()"></p>
</body>
</html>위 내용은 JavaScript 마우스 드래그 이벤트 구현 사례 연구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.