js(drop & drag)

drop & drag

 

 

 

예

 

1. drag할 img속성에 draggable = "true",  ondragStart() = "startProc()" 설정

 

draggable = "true" -> 드래그 가능하게 설정

 

 

ondragStart 속성

 

드래그를 시작했을때 설정해준 startProc() function이 실행되게 함

 

* ondragStrat와 ondrop 속성은 짝꿍~~

 

 

 

 

 

 

2. 그림이 옮겨질 result1 div에 ondrop = "" , ondragover  ="overProc()" 를 줌

 

ovderProv()

 

event.preventDefault() - > 요소가 기본적으로 가지고 있는 이벤트 발생을 막아줌

 

ondrop = "dropProc()"

 

1) event.dataTransfer.getData("targetImg") 

 

 - targetImg라는 객체의 데이터를 가져옴

 

2) event.target.tagName =="DIV"

 

 - dropProc() 이벤트가 발생하는 타겟의 tag가 DIV일때

 

3) event.target.appendChild(document.getElementById(imgId))

 

타겟에다가 appendChild 한다(imgId 변수에 담긴 객체를)~