拖拽元素移动拖拽文件上传预览

时间：2023-04-05 13:19:31 HTML5

创建于2019-08-05测试环境：win10,chrome76.0.3809.87codepen在线演示所有代码及html代码解释

拖拽并拖放元素

被拖元素设置为draggable="true"

拖放上传文件

两种图片预览方法

js代码/*@des元素拖动代码*/constdragEle=document.querySelector('#drag');/*@desdropzone必须设置ondragover和ondrop事件*/constdropEle=document.querySelector('.drop');dragEle.addEventListener('drag',function(event){console.log('drag');event.preventDefault();})dropEle.addEventListener('drop',function(event){console.log('drop',event.target.className);event.preventDefault();如果(event.target.className==='drop'){事件。目标。appendChild（文档。getElementById(event.dataTransfer.getData('dragId')));/*@des下面的代码直接获取了dragstart中设置的html字符串*///event.target.innerHTML=event.dataTransfer.getData('ele');}})/*@des设置拖动时的图标，dataTransfer.setDragImage(img,xOffset,yOffset);这里的img对象必须先设置，如果事件中设置无效，则不会及时加载图片*/constimg=newImage();img.src='./101.png';dragEle。addEventListener('dragstart',function(event){console.log('dragstart');/*@des可以开始拖动事件中设置一些数据项，数据类型为MIME，示例如下event.dataTransfer.setData('text/plan','idvalue')event.dataTransfer.setData('text/html','123456')text/uri-list,文本，设置键值也可以是任何其他变量名（a,b,c等）.....*/event.dataTransfer.setData('dragId',event.target.id);event.dataTransfer.setData('ele','Hello');event.target.style.opacity=1;event.dataTransfer.setDragImage(img,10,10);/*@des设置拖动模式，复制、移动、链接*/event.dataTransfer.dropEffect="copy";})dropEle.addEventListener('dragover',function(event){console.log('dragover');event.preventDefault();})dragEle.addEventListener('dragend',function(event){console.log('dragend');event.target.style.opacity='';})dragEle.addEventListener('dragenter',function(event){event.preventDefault();console.log('拖入');})/*@des拖拽上传文件代码*/constdropFile=document.querySelector('#dropFile');dropFile.addEventListener('dragover',function(event){event.preventDefault();})dropFile.addEventListener('drop',function(event){//一定要关闭浏览器默认事件，否则文件会在新窗口打开event.preventDefault()constfile=event.dataTransfer.files;console.log(file);constreader=newFileReader();/*@destext文本不能和图片文件一起上传，否则会报忙读Blobs*/for(leti=0;i

上一篇：Canvas实例---制作一个简单的迷宫_0

下一篇：VUE实战11：下拉选择列表（Select）控件，输入框输入系列，后台Admin

拖拽元素移动拖拽文件上传预览相关文章