WEB개발이야기/웹퍼블리싱 2019. 9. 30.
javascript로 드레그가 가능한 HTML 요소 만들기
javascript로 HTML의 DIV를 드레그할 수 있게 하는 간단한 기능 구현입니다. 이와 비슷한 기능은 jquery UI에서 제공해 주고 있긴 하지만 드레그 기능 하나 구현하겠다고 jquery UI를 붙히기는 웬지 손해 보는 느낌입니다. 바닐라JS로 구현하는 코드와 설명입니다. HTML 먼저 간단하지만 HTML 구성요소 입니다. CSS CSS도 간단하게 구현합니다. 마우스가 해당 요소에 올라가때 화살표 마우스 표시가 이동이 가능한 표시로 바뀜니다. #dragdiv { cursor: move; } javascript 핵심기능인 javascript 코드 입니다. 바닐라JS로 구현 시 3가지의 단계로 구현이 되면 하나씩 설명을 하겠습니다. 마우스로 요소를 클릭 할 때 기능 구현 클릭한 요소를 움직일 떄 ..