HTML5拖拽

mac2022-06-30  24

1. 创建拖拽对象①给需要拖拽的元素设置draggable属性,它有三个值:true:元素可以被拖拽;false:元素不能被拖拽;auto:浏览器自己判断元素是否能被拖拽。2. 处理拖拽事件① 当我们拖拽对象的时候会触发拖拽事件包括:A.dragstart:当元素拖拽开始触发;B.drag:在元素拖拽过程中触发;C.dragend:元素拖拽结束时触发。

3. 创建投放区

①当拖拽对象进入投放区的时候会触发相关的事件

A.dragenter:当拖拽对象进入投放区时触发;

B.dragover:拖拽对象在投放区内移动时触发;

C.dragleave:拖拽对象没有投放到投放区,离开投放区的时候触发;

D.drop:拖拽对象投放在投放区时触发。

②注意:dragenter、dragover、dragleave可能会受到默认事件的影响,所以我们在事件当中使用e.preventDefault();来阻止事件默认事件。

4. 使用dataTransfer传递数据1.当我们需要拖拽对象向投放区传递数据的时候用到dataTransfer有下面的属性和方法:1.types:返回数据的格式;2.getData(<format>):返回指定格式数据;3.setData(<format>, <data>):设置指定格式数据;4.clearData(<format>):移除指定格式数据;5.files:返回已经投放的文件的信息数组。1.type:文件类型2.size:文件大小3.name:文件名

1.异步ajaxvar xml=new XMLHttpRequest();xml.open("post","1.php");xml.send(formData);2.表单数据var formData=new FormData();formData.append("aa",DataTransferObj);

例子:

<!DOCTYPE HTML><html> <head> <style> #box{ width:150px;height:150px;border:1px dashed red; font-size:13px;line-height:150px;text-align:center; } </style> <script> window.οnlοad=function () { var box=document.getElementById("box"); box.οndragenter=function (e) { e.preventDefault() } box.οndragοver=function (e) { box.innerHTML="请松开" e.preventDefault() } box.οndragleave=function (e) { box.innerHTML="请拖入上传的文件" e.preventDefault() } box.οndrοp=function (e) { var file=e.dataTransfer.files[0]; var formData=new FormData(); formData.append("aa",file); var xml=new XMLHttpRequest(); xml.open("post","up.php"); xml.send(formData); e.preventDefault() } } </script> </head> <body> <div id="box"> 请拖入上传的文件 </div> </body></html>

转载于:https://www.cnblogs.com/blesstian/p/6486422.html

最新回复(0)