H5 文件拖拽api

dragenter 拽进

dragleave拽出

dragover悬停

drop 释放

​ (e.dataTransfer.files); // 获取拖拽进来文件的信息,类似 input标签type = file;

​ drop 使用时必须阻止dragover默认行为"

注意 H5 新API 是Dom3事件 使用 addEventListener 绑定事件;

<!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>
    #div1 {
      border: 1px solid #000;
      height: 300px;
      width: 50%;
      background: #ccc;
      margin: 0 auto;
      line-height: 300px;
      text-align: center;
    }
  </style>
</head>

<body>

  <div id="div1">请拖拽到这里</div>

</body>

</html>

<script>
  let  odiv = document.getElementById('div1');
  odiv.addEventListener('dragenter',() => {
    odiv.innerHTML = '释放文件'
  })
  
  odiv.addEventListener('dragleave',() => {
    odiv.innerHTML = '请拖拽到这里'
  })

  odiv.addEventListener('dragover',(e) => {
    e.preventDefault();  //drop 使用时dragover必须阻止默认行为
    // 或者 return false;
    // console.log("drop 使用时必须阻止默认行为");
  }, false)
  
  odiv.addEventListener('drop',(e) => {
    // 或者 return false;
    // console.log("drag");
    console.log(e.dataTransfer.files);    // 获取拖拽进来文件的信息,类似 input标签type = file; 
    e.preventDefault();      // 阻止文件打开
  }, false)                    // false 阻止文件打开 冒泡;



</script>
posted @ 2018-06-22 00:29  wangpinzhou  阅读(199)  评论(0)    收藏  举报