[JavaScript] 이미지 드래그해서 옮기기

이번시간에는 이미지를 드래그해서 옮기는 예제를 만들어 보겠습니다.

 

하단 스틱코드를 즐겨찾기해주세요!

 

https://stickode.com/detail.html?no=2794 

https://stickode.com/detail.html?no=2794

 

이미지 예시입니다.

이미지를 마우스로 클릭하면 드래그 해서 이동할 수 있습니다.

https://www.w3schools.com/html/html5_draganddrop.asp   참고사이트

지원하는 브라우저 버전을 확인하고 사용하시길 바랍니다.

 

처음 이미지가 만들어질 곳을 정합니다. 왼쪽에서 50, 화면상단에서 50 px 만큼의 위치에 이미지를 놓아보겠습니다.

<script type='text/javascript'>

var img_L = 50;
var img_T = 50;
var targetObj;

function getLeft(o){
return parseInt(o.style.left.replace('px', ''));
}
function getTop(o){
return parseInt(o.style.top.replace('px', ''));
}

 

이미지를 움직이는 함수를 만들어 보겠습니다.
처음있던 위치애서, 움직인값의 좌표만큼을 더해줍니다.

function moveDrag(e){
var e_obj = window.event? window.event : e;
var dmvx = parseInt(e_obj.clientX + img_L);
var dmvy = parseInt(e_obj.clientY + img_T);
targetObj.style.left = dmvx +"px";
targetObj.style.top = dmvy +"px";
return false;
}

 

드래그를 시작하는 함수 입니다.
마지막으로 움직인 좌표값에서, 이전움직였던 좌표값을 빼줍니다. == 움직인 좌표를 나타냅니다.
움직였던 좌표에서 처음 드래그를 시작했던 좌표를 빼줍니다. 움직인 좌표를 나타내줍니다

function startDrag(e, obj){
targetObj = obj;
var e_obj = window.event? window.event : e;
img_L = getLeft(obj) - e_obj.clientX;
img_T = getTop(obj) - e_obj.clientY;

document.onmousemove = moveDrag;
document.onmouseup = stopDrag;
if(e_obj.preventDefault)e_obj.preventDefault();
}

 

드래그를 정지하는 함수 입니다.

하단에는 이미지경로와 이미지를 담아줍니다.

function stopDrag(){
document.onmousemove = null;
document.onmouseup = null;
}
</script>

// 넣고싶은 이미지를 넣어줍니다.
<img src="이미지위치/img.png" style="position:absolute; left:0px; top:50px; cursor:pointer; cursor:hand; border:0" onmousedown="startDrag(event, this)">

 

< 전체소스 >

<script type='text/javascript'>
// 처음 이미지가 만들어질 곳을 정합니다. 왼쪽에서 10, 화면상단에서 20 만큼의 위치에 이미지를 놓아보겠습니다.
var img_L = 10;
var img_T = 20;
var targetObj;

function getLeft(o){
return parseInt(o.style.left.replace('px', ''));
}
function getTop(o){
return parseInt(o.style.top.replace('px', ''));
}

// 이미지를 움직이는 함수를 만들어 보겠습니다.
// 처음있던 위치애서, 움직인값의 좌표만큼을 더해줍니다.
function moveDrag(e){
var e_obj = window.event? window.event : e;
var dmvx = parseInt(e_obj.clientX + img_L);
var dmvy = parseInt(e_obj.clientY + img_T);
targetObj.style.left = dmvx +"px";
targetObj.style.top = dmvy +"px";
return false;
}

// 드래그를 시작하는 함수 입니다.
// 마지막으로 움직인 좌표값에서, 이전움직였던 좌표값을 빼줍니다. == 움직인 좌표를 나타냅니다.
// 움직였던 좌표에서 처음 드래그를 시작했던 좌표를 빼줍니다. 움직인 좌표를 나타내줍니다
function startDrag(e, obj){
targetObj = obj;
var e_obj = window.event? window.event : e;
img_L = getLeft(obj) - e_obj.clientX;
img_T = getTop(obj) - e_obj.clientY;

document.onmousemove = moveDrag;
document.onmouseup = stopDrag;
if(e_obj.preventDefault)e_obj.preventDefault();
}

// 드래그를 정지하는 함수 입니다.
function stopDrag(){
document.onmousemove = null;
document.onmouseup = null;
}
</script>

<img src="이미지위치/img.png" style="position:absolute; left:0px; top:50px; cursor:pointer; cursor:hand; border:0" onmousedown="startDrag(event, this)">

 

스티코드를 활용해서 이미지를 드래그 해보세요!

https://stickode.com/detail.html?no=2794 

https://stickode.com/detail.html?no=2794