H5拖拽

最新推荐文章于 2025-03-21 11:06:01 发布

caicai16

最新推荐文章于 2025-03-21 11:06:01 发布

阅读量1.2k

点赞数

分类专栏： H5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/caicai16/article/details/107076579

版权

H5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了H5与JS实现拖拽功能的不同方法，包括JS的onmousedown、onmousemove、onmouseup三事件，以及H5拖拽在百度图片识别、QQ邮箱、百度网盘等场景的应用。此外，还讲解了H5的七个相关事件、常用属性以及如何获取文件信息，如名称、大小、修改时间，并通过FileReader进行文件读取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、H5拖拽与Js拖拽用途
JS里的拖拽三事件：onmousedown、onmousemove、onmouseup是实现交互性效果，根据鼠标的移动位置让标签元素联动。
2、H5拖拽也可以实现但更简单，例如：百度图片识别、QQ邮箱文件提交、百度网盘文件上传等，并可以获取到文件的名称、大小、修改时间。
3、实例
1）JS拖拽
在这里插入图片描述

let Oapp=document.querySelector("#app");
    Oapp.onmousedown=function(e){
        let x=e.clientX-this.offsetLeft;
        let y=e.clientY-this.offsetTop;
        //e.client鼠标按下点距离浏览器左上角位移，this.offsetTop距离左边的值
        Oapp.onmousemove=function(e){
        Oapp.style.cssText=`left:${e.clientX-x}px;top:${e.clientY-y}px`;
        //计算盒子移动的位置，使用鼠标距离左边盒子的距离值
    }
    Oapp.onmouseup=function(){
        Oapp.onmousemove=onmouseup=null;
        //鼠标抬起的时候应该清除移动和抬起事件，不清除鼠标就无法离开盒子的范围
    }
}

2）H5拖拽
在这里插入图片描述

//draggable是H5的新特性，为了让元素可以拖动
        //使用draggable属性：值为true/false/auto
        //auto是根据浏览器定义是否可以拖拽。一般图片等是默认可以拖拽的，所以draggable的默认值为true 
       let Oapp=document.querySelector("#app");
        Oapp.ondragend=function(e){
            this.style.cssText=`let:${e.clientX}px;top:${e.clientY}px`;
        }
        //补充：cssText
        //cssText cssText 的本质就是设置 HTML 元素的 style 属性值
        //格式：obj.style.cssText=”样式”;
        //element.style.cssText =`width:300px;height:200px;border:solid 1px yellow;`
        //使用累加的方法解决元素被清除的问题  
        //element.style.cssText +=`width:300px;height:200px;border:solid 1px yellow;`
        //多加一个分号解决在IE浏览器中的问题
        //Element.style.cssText += `;width:300px;height:300px;bottom:200px;right:200px;`

4、H5七事件
在这里插入图片描述

 let Odrag=document.querySelector("#drag");
       let Otarget=document.querySelector("#target");
       //一、拖拽的元素事件
      // 可以不用获取事件，直接书写
        //1、拖拽开始时
        Odrag.ondragstart=function(e){
           this.style.background='red';
           console.log(e)
        }

      //2、拖拽持续触发
         Odrag.ondrag=function(e){
           this.style.background='pink';
        }
      //3、拖拽结束的事件

        Odrag.ondragend=function(){
           this.style.background='blue';
        }

      //二、拖拽的目标元素事件
      //4、元素被拖拽进入目标时
        Otarget.ondragenter=function(){
           this.innerText='我进入了目标区域';
        }

        //5、鼠标停留在目标时
        Otarget.ondragover=function(e){
            this.innerText='我停在了目标区域';
            this.style.background='orange';
            e.preventDefault();//需要阻止浏览器得默认拖动的事件
        }

         //6、鼠标离开目标时
        Otarget.ondragleave=function(){
            this.innerText='我离开了目标区域';
        }
         //7、在目标区域上释放鼠标
        Otarget.ondrop=function(){
             //如果需要用到e属性就要写，不想需要就不写
            Otarget.innerText='文件删除了';
            document.body.removeChild(Odrag);//删除子元素Odrag
        }

5、H5中的常用属性
在这里插入图片描述

  let Oapp=document.querySelector("#app");
   let Obox=document.querySelector("#box");
  
    Oapp.ondragstart=function(e){
       this.style.background='red';
       console.log(e.dataTransfer);
       e.dataTransfer.effectAllowed="move"
       //dataTransfer：该对象用于保存拖拽过程中的数据，所以我们可以用这个属性获取相关的数据信息。
       //只要dropEffect属性和effectAllowed属性之中，有一个为none，就无法在目标节点上完成drop操作。
        //获取当前选定的拖放操作类型或者设置的为一个新的类型，可以改变光标的显示样式，要跟effectAllowed搭配使用，否则不生效。
        //effectAllowed的值：copy|move|link|copyLink|copyMove|linkMove|all|none|uninitialized
    }

     Oapp.ondrag=function(e){
       this.style.background='pink';
    }

    Oapp.ondragend=function(e){
       this.style.background='blue';
    }

    Obox.ondragenter=function(e){
       this.innerText='我进入了目标区域';
    }
   
    Obox.ondragover=function(e){
        this.innerText='我停在了目标区域';
        this.style.background='orange';
        e.preventDefault();//需要阻止浏览器得默认拖动的事件
        e.dataTransfer.dropEffect="move"//设置鼠标的样式
        //dropEffect值：none|copy|link|move
    }
    Obox.ondragleave=function(e){
        this.innerText='我离开了目标区域';
    }
    
    Obox.ondrop=function(e){
        Obox.innerText='在目标区域上释放鼠标';
        document.body.removeChild(Oapp);//删除子元素Oappp
    }

6、H5中获取文件信息
1）获取整个文件信息
在这里插入图片描述

 let target=document.querySelector("#target");
    target.ondragover=function(e){
    this.innerText='松开鼠标删除图片';
    e.preventDefault();//阻止默认事件
    }
    target.ondrop=function(e){
        //dataTransfer.files获取文件信息
      console.log(e.dataTransfer.files);
      e.preventDefault();//如果不阻止默认事件，就会执行浏览器打开图片预览的默认事件
    }

2）读取文件信息FileReader
读取文本文件
在这里插入图片描述

let target=document.querySelector("#target");
        target.ondragover=function(e){
        //持续拖拽鼠标
            this.innerText='松开鼠标删除图片';
            e.preventDefault();//阻止默认事件
        }
        target.ondrop=function(e){
            //松开鼠标
            //dataTransfer.files获取文件信息
            let fileInfo=e.dataTransfer.files;
            e.preventDefault();
            //如果不阻止默认事件，就会执行浏览器打开图片预览的默认事件
            let file=fileInfo[0];
            let reader=new FileReader();
            //创建一个文件读取对象实例
            // reader.readAsBinaryString();//使用原始二进制字符串来显示展示文件数据（读取英文文本文件）
            // reader.readAsArrayBuffer();//使用指定二进制对象来读取内容
            // reader.readAsText();//使用文本字符串来展示文件数据（读取英文文本文件）
            // reader.readAsDataURL();//使用URL来展示文件数据
            reader.readAsBinaryString(file);
            //读完的时候，拿到文件信息
            reader.onload=function(e){
                    
                //              未加任何数据   |     数据正在被加载        |     完成所有的读取请求
                //readyState       0                       1                          2
                //FileReader       EMPTY                  LOADING                     DONE

                if(e.target.readyState===FileReader.DONE){
                    //直接获取结果
                    let result=reader.result;
                    target.innerHTML="File:"+file.name +result;
                    console.log(reader);
                }
              
            }
            
        }

用来读取图片就会乱码
在这里插入图片描述

读取图片
在这里插入图片描述

let target=document.querySelector("#target");
        target.ondragover=function(e){
        //持续拖拽鼠标
            this.innerText='松开鼠标删除图片';
            e.preventDefault();//阻止默认事件
        }
        target.ondrop=function(e){
            //松开鼠标
            //dataTransfer.files获取文件信息
            let fileInfo=e.dataTransfer.files;
            e.preventDefault();
            //如果不阻止默认事件，就会执行浏览器打开图片预览的默认事件
            let file=fileInfo[0];
            let reader=new FileReader();
            //创建一个文件读取对象实例
            // reader.readAsBinaryString();//使用原始二进制字符串来显示展示文件数据（读取英文文本文件）
            // reader.readAsArrayBuffer();//使用指定二进制对象来读取内容
            // reader.readAsText();//使用文本字符串来展示文件数据（读取英文文本文件）
            // reader.readAsDataURL();//使用URL来展示文件数据
            reader.readAsDataURL(file);//会以数据URI格式返回，所以类似于src属性
            //读完的时候，拿到文件信息
            reader.onload=function(e){
                let Img=new Image();
                console.log(reader.result);
                //读取图片时，reader.result返回一个base64编码的图片路径
                Img.src=reader.result;
                Img.width=100;
                Img.height=100;
                target.appendChild(Img);
            }         
        }

Blob读取文件
在这里插入图片描述

    let target=document.querySelector("#target");
    target.ondragover=function(e){
    //持续拖拽鼠标
        this.innerText='松开鼠标读取文件内容';
        e.preventDefault();//阻止默认事件
    }
   target.ondrop=function(e){
        e.preventDefault();//阻止默认事件
        this.innerText="文件读取成功";
        let fileInfo=e.dataTransfer.files;//获取文件属性
        let file=fileInfo[0];
        //拿到文件之后，读取信息方法
        //因为是一个二进制的对象，所以需要先用Blob方法
        let Blob=new Blob(file);//把读取到的文件对象放进新建的对象里面
        let url=window.URL.createObjectURL(Blob);
        concole.lo(url);
        let Img=new Image();
            //读取图片时，reader.result返回一个base64编码的图片路径
            Img.width=100;
            Img.height=100;
            Img.src=url;
            Img.onload=function(){
                target.appendChild(this);
            }
   }