JavaScript学习之拖拽事件DragEvent

拖放事件接口为DragEvent，其他继承自MouseEvent和Event接口。但是拖放事件有些特殊，涉及到源对象与目标对象两类元素，这两类元素会在拖放过程中产生不同的事件

源对象与目标对象会在拖放过程中产生不同的事件

• 源对象

  • dragstart 开始拖放触发
  • drag 源对象拖放过程中触发
  • dragend 释放鼠标左键时触发

• 目标对象

  • dragenter 源对象进入目标对象范围时触发
  • dragover 源对象在目标对象范围内悬停触发
  • dragleave 源对象拖离目标对象范围时触发
  • drop 源对象在目标对象范围内释放时触发

测试目标对象拖拽事件出现一个问题，即无法触发drop事件。原因是dragover有一个浏览器默认行为，那就是当dragover触发时，drop事件会失效，所以如果想让drop事件生效，必须要组织dragover的默认事件。

div.ondragover=(event)=>{
	console.log('dragover...')
	event.preventDefault()
}

针对火狐浏览器，在拖拽超链接与图片时浏览器默认将会打开一个新的标签页打开这个网页或图片，需要手动把这个浏览器默认功能禁用掉。

div.ondrop=function(event){
	event.preventDefault()
	event.stopPropagation()
	//....
}

拖放事件传参

• HTML5规定在一次拖拽过程中如果需要进行数据的传输，需要借助DataTransfer对象来完成

  • 源对象中存储数据

    p.dragstart=(event)=>{
        let dt=event.dataTransfer
        // 存数据
        dt.setData('tagName','huwe')
        dt.setData('id',1)
        dt.setData('innerHTML',p.innerHTML)
    }
    
    

  • 目标对象读取数据

    d2.ondrop=(event)=>{
        let dt=event.dataTransfer
        // 取数据
        let tn=dt.getData('tagName')
        let id=dt.getData('id')
        let ih=dt.getData('innerHTML')
        let newE=document.createElement(tn)
        newE.innerHTML=ih
        d2.appendChild(newE)
    }
    
    

获取拖拽的文件

• 当用户把操作系统某一个或多个文件拖拽到目标区域并释放后，将会触发目标区域的drop事件，浏览器将会把源文件相关信息进行封装，存入event.dataTransfer,所以可以通过DataTransfer获取源文件信息，为拖拽文件上传提供文件数据

• event.dataTransfer.files

• 【注】表单上传文件的要求

  • 必须有表单
  • 表单的提交方式必须是POST
  • 必须设置表单属性enctype=“mutiple/form-data”
  • 必须包含input type=file控件