拖拽事件

Posted 逗比煎饼侠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽事件相关的知识，希望对你有一定的参考价值。

PC端的拖拽事件：

1.拖拽
  ondragenter       进去
  ondragleave       出来
  ondragover        悬停——一直发生
  ondrop            松手

2.
let oFile=ev.dataTransfer.files[0];
let reader=new FileReader();

reader.onload=function (){};
reader.onerror=function (){};

reader.readAsText/DataURL/ArrayBuffer/BinaryString()


reader.readAsText(oFile)            文本                    文本文件
reader.readAsDataURL(oFile)         base64                  图片
reader.readAsArrayBuffer(oFile)     原始二进制数据           编辑        不实用
reader.readAsBinaryString(oFile)    二进制的文本形式数据     上传

JS——高级语言，不擅长处理二进制数据

1.reader.readAsDataURL(oFile);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    #div1 {width:400px; height:300px; background:#CCC; border:1px solid black; text-align:center; line-height:300px;}
    </style>
    <script>
    window.onload=function (){
      let oDiv=document.getElementById(‘div1‘);
      let oImg=document.getElementById(‘img1‘);

      oDiv.addEventListener(‘dragenter‘, function (){
        oDiv.innerHTML=‘请松手‘;
      }, false);
      oDiv.addEventListener(‘dragleave‘, function (){
        oDiv.innerHTML=‘拖到这里上传‘;
      }, false);

      oDiv.addEventListener(‘dragover‘, function (ev){
        ev.preventDefault();
      }, false);
      oDiv.addEventListener(‘drop‘, function (ev){
        ev.preventDefault();

        //
        let oFile=ev.dataTransfer.files[0];

        //读取
        let reader=new FileReader();

        reader.onload=function (){
          //alert(‘成功‘);

          oImg.src=this.result;
        };
        reader.onerror=function (){
          alert(‘读取失败了‘);
        };
        reader.readAsDataURL(oFile);

        console.log(reader);
      }, false);
    }
    </script>
  </head>
  <body>
    <div id="div1">拖到这里上传</div>
    <img src="" id="img1">
  </body>
</html>

2.reader.readAsArrayBuffer(oFile);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    #div1 {width:400px; height:300px; background:#CCC; border:1px solid black; text-align:center; line-height:300px;}
    </style>
    <script>
    window.onload=function (){
      let oDiv=document.getElementById(‘div1‘);

      oDiv.addEventListener(‘dragenter‘, function (){
        oDiv.innerHTML=‘请松手‘;
      }, false);
      oDiv.addEventListener(‘dragleave‘, function (){
        oDiv.innerHTML=‘拖到这里上传‘;
      }, false);

      oDiv.addEventListener(‘dragover‘, function (ev){
        ev.preventDefault();
      }, false);
      oDiv.addEventListener(‘drop‘, function (ev){
        ev.preventDefault();

        //
        let oFile=ev.dataTransfer.files[0];

        //读取
        let reader=new FileReader();

        reader.onload=function (){
          //alert(‘成功‘);

          console.log(this.result);

          alert(this.result[0]);
        };
        reader.onerror=function (){
          alert(‘读取失败了‘);
        };
        reader.readAsArrayBuffer(oFile);
      }, false);
    }
    </script>
  </head>
  <body>
    <div id="div1">拖到这里上传</div>
  </body>
</html>

3.reader.readAsBinaryString(oFile);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    #div1 {width:400px; height:300px; background:#CCC; border:1px solid black; text-align:center; line-height:300px;}
    </style>
    <script>
    window.onload=function (){
      let oDiv=document.getElementById(‘div1‘);

      oDiv.addEventListener(‘dragenter‘, function (){
        oDiv.innerHTML=‘请松手‘;
      }, false);
      oDiv.addEventListener(‘dragleave‘, function (){
        oDiv.innerHTML=‘拖到这里上传‘;
      }, false);

      oDiv.addEventListener(‘dragover‘, function (ev){
        ev.preventDefault();
      }, false);
      oDiv.addEventListener(‘drop‘, function (ev){
        ev.preventDefault();

        //
        let oFile=ev.dataTransfer.files[0];

        //读取
        let reader=new FileReader();

        reader.onload=function (){
          //alert(‘成功‘);

          console.log(this.result);

          alert(this.result[0]);
        };
        reader.onerror=function (){
          alert(‘读取失败了‘);
        };
        reader.readAsBinaryString(oFile);
      }, false);
    }
    </script>
  </head>
  <body>
    <div id="div1">拖到这里上传</div>
  </body>
</html>

4 . reader.readAsText(oFile);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    #div1 {width:400px; height:300px; background:#CCC; border:1px solid black; text-align:center; line-height:300px;}
    </style>
    <script>
    window.onload=function (){
      let oDiv=document.getElementById(‘div1‘);

      oDiv.addEventListener(‘dragenter‘, function (){
        oDiv.innerHTML=‘请松手‘;
      }, false);
      oDiv.addEventListener(‘dragleave‘, function (){
        oDiv.innerHTML=‘拖到这里上传‘;
      }, false);

      oDiv.addEventListener(‘dragover‘, function (ev){
        ev.preventDefault();
      }, false);
      oDiv.addEventListener(‘drop‘, function (ev){
        ev.preventDefault();

        //
        let oFile=ev.dataTransfer.files[0];

        //读取
        let reader=new FileReader();

        reader.onload=function (){
          console.log(this.result);
        };
        reader.onerror=function (){
          alert(‘读取失败了‘);
        };
        reader.readAsText(oFile);
      }, false);
    }
    </script>
  </head>
  <body>
    <div id="div1">拖到这里上传</div>
  </body>
</html>

 

以上是关于拖拽事件的主要内容，如果未能解决你的问题，请参考以下文章

拖拽上传实现

JS拖拽元素原理及实现代码

即使鼠标不移动，D3'Drag'事件也会触发

VUE 创建页面浮窗，拖拽事件与点击事件共存

简单拖拽即生成网页 VvvebJs

自定义拖拽