자바스크립트-drag & drop event

 

 

<자바스크립트 - 리스트, drag & drop 이벤트>

 

 

 

 

var num1 = 10
var num2 = 20
var num3 = 30

다음위의 3개의 변수들을 출력할때


for (var index=0; index<3 ; index++){
console.log(num + (index + 1))
}


ㄴ위의 방식은 틀린 방식이다 작동 불가능

ㄴnum1, num2 , num3이 차례로 출력되는 것이아닌, num변수에 index+1을 산술적으로 더해버린 값이 나오게 된다

ㄴ변수명은 고유한 값이라서 위와같이 조작할 수 없다

ㄴ 여러개의 변수들을 이용한 반복문을 쓰려면 리스트를 써야한다


ㄴvar numList = [10,20,30]

for (var index=0; index<numList.length ; index++){
    console.log(numList[index])
}



ㄴ이와같이 리스트이용하여 여러 변수들을 갖고 반복문사용가능

ㄴ 단, 조건문에서는 반드시 length를 이용하여 유동적인 코드를 만들어야한다

ㄴnumList.push(50)

ㄴ다음과같은 코드로 리스트에 새로운 값추가도 가능하다





리스트의 장점)

1) 여러개의 변수들을 갖고 반복문을 사용가능

2) 언제든지 값추가해서 유연하게 사용가능















<drag & drop 이벤트>

ㄴ많이 쓰이는 이벤트

ㄴ3가지의 이벤트가 합쳐져서 구성되는 이벤트

ㄴondragstart : 드래그 시작되는 지점, ondragover : 드래그 끝나는 지점, ondrop : 드래그 끝나는 지점

ㄴ 그때 각각에 시행될 함수를 적어준다






배경색 가져오기)







function dragOverEvent(e) {

e.preventDefault()
}


ㄴ 드래그앤 드롭이벤트를 만들면, 다른 여러 이벤트들과 충돌이 생겨난다. (특히 mouseover이벤트) 이를 방지하기위해 e.preventDefault()함수를 드래그오버에 써줘야한다














??getComputedStyle, preventDefault() 공부해서 더채워넣기