자바기반의 웹&앱 응용 SW개발자 양성과정 62일차 -94

 

노드 추가 : appendChild / append

노드 삽입 : insertBefore / insertAdjacentElement /insertAdjacentHTML

 

 

insertAdjacentHTML("위치", 삽입할 HTML)

 

 

위치

• beforebegin': targetElement 전.
• 'afterbegin': targetElement 첫 번째 자식 앞에.
• 'beforeend': targetElement 마지막 자식 다음에.
• 'afterend': targetElement 뒤.

 

Javascript 드래그 앤 드롭

 

onmouse 이벤트를 사용한다.

down , move , up을 사용한다.

 

마우스 이벤트들이 가지고 있는 속성

https://developer.mozilla.org/ko/docs/Web/API/MouseEvent

MouseEvent

 

화면 즉 윈도의 좌표를 얻고 싶다면 screen좌표를 사용한다.

문서 내에서 좌표를 얻고 싶다면 client , (x, y)를 사용한다.

지정된 영역의 좌표를 얻고 싶다면 offset을 사용한다.

 

 

모든 element는 현재 자신의 위치를 반환해주는 속성이 존재한다.

offsetLeft , offsetTop.... 등등이 존재한다. 

 

박스를 드래그를 할 때  첫 클릭 시 e.target을 변수에 담아주고  e.target일 경우에만 이벤트가 발생되도록 해야 버벅거리지 않습니다. 

 

e.target.style.width값을 얻어오게 되면 빈 문자열이 반환됩니다.

그 이유는  자바스크립트에서는 속성 값을 읽어오기 위해서는 getComputedStyle()를 사용합니다.

 

 

  var currentStyle = window.getComputedStyle(current);

    var width = currentStyle.getPropertyValue("width");

    var height = currentStyle.getPropertyValue("height");

 

 

1.clientX , clientY == (X, Y)

 

위 메서드는 현재 보이는 브라우저의 영역의 가로 , 세로 좌표를 제공합니다.

주의할 점은 스크롤은 무시하며 , 해당 페이지의 좌측 상단을 0으로 측청 합니다.

 

2. offsetX, offsetY

이벤트가 발생되는 대상이 기준이 되어 좌측 상단이 0으로 측정됩니다.

 

3.pageX, pageY

브라우저의 영역을 기준으로 X, Y좌표를 반환하며 스크롤 화면을 포함합니다.

 

4.screenX , screenY

모니터 화면을 기준으로 좌표를 제공합니다.