마우스 클릭 위치 에러 바로 잡기 (클릭 이미지 기준 위치)

 

지난 포스팅에서 작성한 드래그 앤 드랍 기능에 문제점이 있으니

클릭한 지점이 아닌 좌측 상단 으로 이동하는 문제가 발생

 

 

마우스 클릭 위치 에러 바로 잡기위해서는 이미지에서 드래그 시작 위치 점의 좌표값을 빼주면 된다.

그럼 이미지에서 드래그 위치 좌표값을 어떻게 구할 수 있을까

$imgs.on("mousedown",function(e){
    var offset = $dragTarget.offset();//대상 이미지 좌표값 저장
    startX = e.pageX-offset.left;
    startY = e.pageY-offset.top;
})

이미지를 클릭했을때 클릭한 대상의 좌표값을 저장하고 문서에서의 클릭한 지점의 값을 빼준다.

그러면 결국 이미지 안에서 클릭한 지점의 좌표값만 남게 된다.

 

$(document).on("mousemove", function(e){
    var endX = e.pageX-startX;
    var endY = e.pageY-startY;
})

그리고 문서에서 마우스 위치를 알아내서 클릭한 지점의 좌표값 만큼 빼주면 마우스가 클릭한 지점에서 이동하게 된다.

 

그럼 위에 코드에서 마우스 위치 에러를 수정한 드래그 앤 드랍 코드를 확인 해보자