Drag & Drop API

1-blue·2021년 11월 16일
0

📀 JavaScript 📀

목록 보기
9/11

1. 사용법

정확하게 이해가 안가서 사용법만 먼저 기록함

<body>
  <div class="drop">드롭 해봐</div>

  <div class="preview"></div>

  <script>
    const $drop = document.querySelector(".drop");

    // 이 부분 없으면 dragover이벤트가 ondrop를 덮어씌워서 ondrop가 무시되는 것 같음
    $drop.ondragover = function(e) {
      e.preventDefault();
    };
    
    // 사용자가 특정 파일을 드랍했을 경우 실행
    // e.dataTransfer.files에 FileList가 들어가 있음
    $drop.ondrop = function(e) {
      e.preventDefault();

      const fileReader = new FileReader();

      fileReader.onload = e => document.querySelector(".preview").style = `background-image: url("${e.target.result}")`;

      fileReader.readAsDataURL(e.dataTransfer.files[0]);
    };
  </script>
</body>

참고한 사이트

0개의 댓글