[JavaScript] 요소 옮기기

먼저 HTML과 CSS를 이렇게 설정한다.

 

 

 

마우스를 클릭했을 시, 이동 이벤트를 걸어준다. 이동한 거리는 마우스의 현재 위치에서 처음 클릭 위치를 빼면 된다.

그리고 움직이는 요소의 CSS transform을 변경하여 요소의 위치를 바꿔준다.

 

마우스를 놨을 때 이미 걸어줬던 move 이벤트를 취소하여 움직이지 않도록 한다.

마우스는 놓고 다시 마우스를 클릭했을 때, 요소가 그 자리에 있게끔 하기 위해서는

현재 마우스의 위치값 변수를 마우스의 현재위치에서 이동한 거리를 뺀 것으로 지정하면

요소를 다시 클릭해도 그 자리에 있게 된다..