마우스 이벤트를 활용한 drag(드레그)
여기 샘플에서 drop에 대한것은 처리 하지 않습니다.
초기 drag가 필요하여 htm5에서 기본적으로 제공하는 drag 가지고 확장 응용하여 jQuery drag 같은것을 만든줄 알았는데 그렇지 않았습니다.
여기서 소개하는 drag 처리 방식은 아래 사이트에서 참고 하였습니다.
Drag and Drop with JavaScript (w3docs.com)
Drag'n'Drop with mouse events (javascript.info)
그리고 여기선 픽셀만 다루지만 특정 박스 안에서 비율로 처리 되어야 한다면 (확대나 축소) 박스 크기를 계산하여 좌표를 줄때 %(비율)로 주면 됩니다.
■ 아래는 drag(드레그) 관련된것으로 참고하세요.
▶ jQuery drag drop 파일 업로드 샘플 > javascript (pabburi.co.kr)
▶ HTML5 drag drop 샘플 입니다. > javascript (pabburi.co.kr)
첨부파일
- mouse drag drop.html (1.1K) 4회 다운로드 | DATE : 2022-10-03 09:20:03