선택한 요소(1)와 선택한 요소(2)사이의 형제들도 선택하기 - (1):click

보통 앱에서 드래그앤 드롭으로 기간 설정하거나...그런걸 바닐라 자바스크립트로 구현하고 싶었음

A,B,C,D,E 중에서 내가 첫번째 클릭을 B를 하고 두번째 클릭 D를 하면
최종적으로 B,C,D에 클래스가 추가되어 >> 선택된 효과가 나타나는것임
이때 시각적인 구분을 위해 최초와 두번째 클릭한 B와 D에는 별도의 클래스가 더 붙음

 

첫번째로 003을 선택하고, 두번째로 006을 선택함. 이 과정에서 "on" 클래스가 추가 되었고 /// 이후 for문을 통하여 003, 004, 005, 006에 "sel" 이라는 클래스를 추가해준다.

HTML,CSS
!! sel과 on의 스타일 선언 순서에 주의

 

JS

 

나중엔 드래그앤 드롭 (mousedown mouseup)으로도 구현해볼 예정

 

 

소스파일

select.html

0.00MB