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); } }