js 拖拽 - JavaShuo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .source {
        width: 140px;
        height: 140px;
        background-color: red;
      }

      .target {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        margin: 0 auto;
      }
    </style>
  </head>

  <body>
    <div></div>

    <!-- multiple：能夠實現多文件上傳 accept：限制文件類型，自行百度 -->
    <!--<input type="file" multiple>-->
    <input type="file" multiple accept="image/jpeg,image/jpg,image/png" />

    <!-- 設置draggable="true"屬性 是能夠被拖拽的-->
    <div draggable="true" class="source"></div>
    <div class="target"></div>

    <script>
      /**
       *   文件上傳
       */
      var input = document.querySelector('input')
      var div = document.querySelector('div')
      input.addEventListener('change', function () {
        //這個屬性是FileList對象，是一個僞數組，裏面存儲着上傳的全部文件，
        console.log(input.files)
        // 1. 獲取文件
        let file = input.files[0]
        // 2. 建立文件讀取對象
        let fileReader = new FileReader()
        // 3. 調用方法讀取文件
        fileReader.readAsDataURL(file)
        // 獲得結果(注意讀取是須要時間的)
        console.log(fileReader.result)
        // 4. 等待讀取完成 onload
        fileReader.onload = function () {
          console.log(fileReader.result)
          // 結果是 base64 圖片字符串, 能夠直接當成圖片使用
          div.innerHTML = '<img src="' + fileReader.result + '">'
        }
      })

      /**
       *   拖拽效果
       */
      var source = document.querySelector('.source')
      var target = document.querySelector('.target')
      // 當拖拽元素在目標元素上時觸發
      target.addEventListener('dragover', function (e) {
        console.log('來呀，快活啊')
        // 瀏覽器默認阻止了拖拽
        e.preventDefault()
      })
      // 當拖拽元素在目標元素上鬆開鼠標時觸發
      target.addEventListener('drop', function (e) {
        console.log('進來了')
        target.appendChild(source)
      })
    </script>
  </body>
</html>