HTML, JavaScript 캔버스 블록 드래그 앤 드롭 (jQuery, 자바스크립트 클래스 사용 예제)

소개글

자바스크립트로 클래스 생성에 대해 가시적으로 배울 수 있고, 제이쿼리를 이용하여 문서 객체를 동적으로 생성하는 것과 마우스 이벤트를 발생시켜서 캔버스 내의 블록을 자유롭게 드래그 앤 드롭하는 예제입니다.

선택한 블록과 존재하는 블록이 오버랩되었을 때 마우스를 떼면 오버랩 당한 블록의 밑에 붙습니다. 선택한 블록에게 자식 블록들이 존재하면 같이 따라 움직이며, 오버랩 시 뗏을 때 따라 붙게 됩니다.

따라 움직이게 되도록 꼬리물기 식 알고리즘을 구현했습니다. 블록의 가운데 있는 숫자는 블록 고유의 넘버이고, 우측 하단의 숫자는 자식 블록 고유의 넘버입니다. 자식이 존재하지 않거나 독립적으로 존재할 때 자식 블록 넘버는 -1을 설정합니다.

캔버스 내 우측 하단에는 휴지통이 존재합니다. 블록을 드래그해서 휴지통으로 끌고 가면 휴지통이 열린 이미지로 바뀝니다. 그 때 마우스를 떼게 되면 블록이 삭제됩니다. 자식 블록이 있는 경우에는 휴지통이 열리지 않도록 하였습니다.

컴파일 실행환경

Zip archive data

참고 자료

없음