드래그 앤 드랍 최종버전

지난 포스팅까지 작업했던 드래그 앤 드랍

 

 

이제 거의 완성 한 것 같다.

다 끝난것 같지만 여기에는 치명적인 문제점이 있다.

확인을 위해  mousemove 이벤트에 다음과 같이 콘솔을 찍어보고 실행시켜 콘솔창을 확인해보면

$(document).on("mousemove", function(e){
    console.log("mousemove");
})

이렇게 

mousemove 이벤트는 마우스를 대상에 클릭하지 않을때도 실행되는걸 확인할 수 있다.

 

이 문제를 해결하려면 mousemove와 mouseup 이벤트를 이미지가 드래그되기 시작할때 이벤트 리스너를 등록하고 이미지 드래그가 종료되면 등록한 이벤트 리스너를 삭제하면 된다.

 

 

최종버전의 콘솔창을 확인하면 대싱이미지를 클릭한 후에 드래그 했을 경우에만 mousemove가 실행되고 mouseupg하면 이벤트가 사라지는걸 확인할 수 있다.