JS 10일차

# Drag and Drop

- addEventListener에서 'dragover'(드래그실행), 'drop'(파일드롭) 이벤트 사용

- Array.from() 메서드를 사용하여 fileList를 Array형태로 바꾸어준다.

- dragOverHandler 함수와 dropHandler함수 모두 안에 e.preventDefault();를 사용하여 브라우저의 기본설정인 파일열기를 실행하지 않도록 한다.

- dataTransfer는 드래그 되고 있거나 드랍되는 데이터를 표시한다.

- dataTransfer.files는 해당 데이터를 fileList로 표시한다.

    <div id="container">
        <div id="drop_zone">
            <p><i>여기</i>에 파일을 드래그 앤 드랍 하세요</p>
        </div>
    </div>

    <script>
        let dropZone = document.getElementById('drop_zone');

        dropZone.addEventListener('dragover', dragOverHandler);
        dropZone.addEventListener('drop', dropHandler);

        function dropHandler(e) {
            e.preventDefault();     // 브라우저가 파일을 열지 않음

            console.log('드랍되었습니다');
            console.log(e.dataTransfer.files);

            let files = Array.from(e.dataTransfer.files);   // fileList를 array로 바꿔줌

            for(let file of files) {
                console.log(file.name);
            }

            // ...서버에 제출
            document.getElementById('container').innerHTML = '<h1>제출되었습니다</h1>'
        }

        function dragOverHandler(e) {
            console.log('드래그 중입니다.');

            e.preventDefault();     // 브라우저가 파일을 열지 않음
        }
    </script>

---

# Top button

- 특정 위치까지 스크롤하면 Top버튼의 hidden클래스를 지우고, Top버튼을 클릭하면 화면의 맨 위로 자동 스크롤되도록 한다.

- style에서 html에 scroll-behavior: smooth를 적용하면 자동스크롤 될 때 부드럽게 올라가는 효과를 줄 수 있다.

- addEventListener의 이벤트로 scroll을 사용할 때 window를 대상으로 하면 됨.

- document.documentElement.scrollTop

- scrollTop는 viewport를 기준으로 가장 상단의 위치값을 반환한다.

    <style>
        html {
            scroll-behavior: smooth;
        }
        body {
            min-height: 1000px;
        }
        button {
            position: fixed;
            bottom: 1rem;
            right: 1rem;
        }
        .hidden {
            display: none;
        }
    </style>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <button class="hidden">Top</button>

    <script>
        let button = document.querySelector('button');

        window.addEventListener('scroll', (e) => {
            console.log(document.documentElement.scrollTop);

            if(document.documentElement.scrollTop < 200) {
                button.classList.add('hidden');
            } else {
                button.classList.remove('hidden');
            }
        })

        button.addEventListener('click', (e) => {
            document.documentElement.scrollTop = 0;
        })
    </script>

---

+  특정 element의 최상단 위치로 자동스크롤 하고싶을 때

  - scrollIntoView()

// html
// 버튼 클릭시 함수 실행
<button type="button" class="scrolled" onclick="f(event)">
	SCROLL
</button>

<section class="main2">
    <div class="wrapper">
        <div>
            <div>
            ...(생략)...
</section>


// Js
function f(event) {
    document.querySelector('.main2').scrollIntoView();
}
// main2 클래스의 최상단으로 자동스크롤