반응형
이미지 준비
- 이미지를 테스트하기 위한 파일 및 위치 (http://localhost:3000/img/img.jpg)
- 위치는 개인에 맞게 설정
기본 구성
- html 파일 생성 후 이미지 태그로 이미지 출력
- img id : 자바스크립트로 해당 요소 선택을 위함
- style : 절대적 X, Y값을 확인하기 위함 + 커서는 손가락 모양으로 변경
- draggable : 드래그로 이미지가 파란색 영역으로 선택되지 않기 위함 (전체선택하면 나오는 영역)
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<!-- 이미지 보여주기 -->
<img src="http://localhost:3000/img/img.jpg"
id="imgObj"
style="position:absolute; left:0px; top:0px; cursor:pointer;"
draggable="true">
</body>
</html>마우스 드래그 이벤트 코드
인터넷 검색으로 많은 코드들을 찾았는데 너무 복잡하게 되어있거나,
너무 오래된 레거시 문법들이 많아서 가능한 지식선에서... 최대한 쉽게 정리해보았다.
<script>
window.onload = function() {
const imgObj = document.getElementById("imgObj");
let startX=0, startY=0, offsetX=0, offsetY=0;
imgObj.addEventListener("mousedown", function(e){
// 드래그시 마우스 클릭 동작 방지
e.preventDefault();
// 마우스 현재 좌표
startX = e.clientX;
startY = e.clientY;
// 이동중인 마우스의 좌표값 업데이트
offsetX = parseInt(imgObj.style.left) - startX;
offsetY = parseInt(imgObj.style.top) - startY;
// 이동중이거나 마우스 드래그 상태가 아닐때의 이벤트
document.addEventListener("mousemove", startMove);
document.addEventListener("mouseup", stopMove);
});
function startMove(e) {
// 이미지 드래그시 마우스 위치의 좌표로 이동
imgObj.style.left = e.clientX + offsetX + 'px';
imgObj.style.top = e.clientY + offsetY + 'px';
}
function stopMove() {
// 드래그 상태가 아니면 모든 이벤트 제거
document.removeEventListener("mousemove", startMove);
document.removeEventListener("mouseup", stopMove);
}
}
</script>실행
전체 소스 코드
<!-- js image drag move test.html -->
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<script>
window.onload = function() {
const imgObj = document.getElementById("imgObj");
let startX=0, startY=0, offsetX=0, offsetY=0;
imgObj.addEventListener("mousedown", function(e){
// 드래그시 마우스 클릭 동작 방지
e.preventDefault();
// 마우스 현재 좌표
startX = e.clientX;
startY = e.clientY;
// 이동중인 마우스의 좌표값 업데이트
offsetX = parseInt(imgObj.style.left) - startX;
offsetY = parseInt(imgObj.style.top) - startY;
// 이동중이거나 마우스 드래그 상태가 아닐때의 이벤트
document.addEventListener("mousemove", startMove);
document.addEventListener("mouseup", stopMove);
});
function startMove(e) {
// 이미지 드래그시 마우스 위치의 좌표로 이동
imgObj.style.left = e.clientX + offsetX + 'px';
imgObj.style.top = e.clientY + offsetY + 'px';
}
function stopMove() {
// 드래그 상태가 아니면 모든 이벤트 제거
document.removeEventListener("mousemove", startMove);
document.removeEventListener("mouseup", stopMove);
}
}
</script>
<body>
<img src="http://localhost:3000/img/img.jpg"
id="imgObj"
style="position:absolute; left:0px; top:0px; cursor:pointer;"
draggable="true">
</body>
</html>참고
반응형