HTML5-拖拽API的使用方法（附案例）
拖放(拖拽)API
* 实现拖拽效果
* 要拖拽的文件是什么? - 源元素
* 要拖拽到哪里去? - 目标元素
* 目前实现拖拽效果
* 使用原生DOM就能实现 - 最麻烦
* 使用jQuery的插件 - 拖拽效果
* HTML5中提供的拖拽功能
* HTML5中拖拽
* 源元素事件
* dragstart - 当鼠标开始拖放时被触发
* drag - 当鼠标拖放过程中,类似于mousemove事件
* dragend - 当鼠标结束拖放时被触发
* 目标元素事件
* dragenter - 当鼠标拖放进入到目标元素内被触发
* dragover - 当鼠标到达目前元素被触发
* 为该事件增加event.preventDefault();
* drop - 当鼠标实现拖放效果时被触发
* 默认情况下,该事件没有被触发
* 原因 - HTML页面默认情况下,不允许拖放
* 称之为HTML页面的默认行为
* 解决 - 阻止页面的默认行为
* 事件对象event.preventDefault()方法
* dragleave - 当鼠标拖放离开目标元素被触发
* dataTransfer对象
* 作用 - 类似于window系统的剪切板的功能
* 功能
* 可以将源元素的信息(数据),存储在这里
* 将存储在该对象的源元素信息,提供给目标元素
* 方法
* setData() - 设置(源元素)数据
* 在源元素事件中使用
* getData() - 获取设置的数据
* 在目标元素事件中使用
* clearData() - 清除(设置的)数据
* 所有的数据内容,存储在浏览器内存中
* 当使用完毕数据内容时,清除
* setDragImage()方法
* 作用 - 修改拖放过程中,鼠标跟随的图片效果
* 用法 - drag、dragstart等事件
* 注意 - 实际操作中,该方法几乎不用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>拖动目标元素事件</title> 6 <style> 7 #d1{ 8 width: 500px; 9 height: 500px; 10 border: solid 1px black; 11 float: left; 12 } 13 #d2 { 14 width: 500px; 15 height: 500px; 16 border: solid 1px black; 17 float: right; 18 19 } 20 #myimg { 21 width: 200px; 22 height: 200px; 23 } 24 </style> 25 </head> 26 <body> 27 <!--源元素--> 28 <div id="d1"> 29 <img id="myimg" src="../第二天/images/spjt.png" alt="" /> 30 </div> 31 <!--目标元素--> 32 <div id="d2"></div> 33 <script> 34 //1.获取目标元素 35 var d2 = document.getElementById("d2"); 36 //2.为目标元素绑定事件 37 d2.addEventListener("dragenter",MyDragEnter); 38 d2.addEventListener("dragover",MyDragOver); 39 d2.addEventListener("drop",MyDrop); 40 d2.addEventListener("dragleave",MyDragLeave); 41 //3.定义事件处理函数 42 function MyDragEnter(){ 43 console.log("您来了"); 44 } 45 function MyDragOver() { 46 event.preventDefault(); 47 console.log("来来来"); 48 } 49 function MyDrop (){ 50 console.log("不走了"); 51 } 52 function MyDragLeave () { 53 console.log("常来"); 54 } 55 </script> 56 57 </body> 58 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5中的拖放效果</title> 6 <style> 7 #d1{ 8 width: 300px; 9 height: 300px; 10 border: 1px solid black; 11 float: left; 12 13 } 14 #d2 { 15 width: 300px; 16 height: 300px; 17 border: 1px solid black; 18 float: right; 19 } 20 </style> 21 </head> 22 <body> 23 <!--源元素--> 24 <div id="d1"> 25 <img id="myimg" src="../第二天/images/spjt.png" width="256" /> 26 </div> 27 <!--目标元素--> 28 <div id="d2"></div> 29 <script type="text/javascript"> 30 /* 31 * 使用HTML5中的拖放API实现拖放功能 32 * * 源元素事件 - dragstart事件 33 * * 目标元素事件 - drop和dragover事件 34 * * dataTransfer对象 35 */ 36 //1.获取源元素 37 var myimg = document.getElementById("myimg"); 38 //2.获取目标元素 39 var ele = document.getElementById("d2"); 40 //3.为目标元素绑定dragstart事件 41 myimg.addEventListener("dragstart",MyDragStart); 42 //4.为目标元素绑定dragober和drop事件 43 ele.addEventListener("dragover",MyDragOver); 44 ele.addEventListener("drop",MyDrop); 45 //5. 实现事件处理函数 46 function MyDragStart(event){ 47 //将元素的数据，存储在dataTransfer对象中 48 //1. 获取源元素数据 49 var mydata = myimg.src; 50 //2. 获取datatransfer对象 51 var trans = event.dataTransfer; 52 /* 53 * 3.调用setData(type,data)方法 54 * * type - 类型，特指标识（id） 55 * * 类型一般为string 56 * * data - 设置的数据内容 57 * 58 */ 59 trans.setData("text",mydata); 60 61 } 62 function MyDragOver(event){ 63 event.preventDefault(); 64 } 65 function MyDrop(event){ 66 //从dataTransfer对象中，获取之前设置的数据 67 //1.获取dataTransfer对象 68 var trans = event.dataTransfer; 69 /* 70 * 2.从dataTransfer对象中，获取之前设置的数据 71 * getData(type)方法 72 * * type - 之前调用setData()时，传递的是什么值，就是什么值 73 * 74 */ 75 var mysrc = trans.getData("text"); 76 //3. 将源元素（图片），添加到目标元素中 77 ele.innerHTML = "<img src='"+mysrc+"' width='256'/>"; 78 //4. 清除dataTrabsfer对象中的数据 79 trans.clearData("text"); 80 } 81 /* 82 * 事件对象 - 作为事件处理函数的参数存在 83 * * DOM底层代码的默认写法就是event 84 * * 如果使用event事件对象时,标准写法 85 * * 允许不在事件的处理函数中定义参数 86 * * 注意 - 这种写法不是标准写法(不建议) 87 */ 88 89 </script> 90 </body> 91 </html>
* 扩展内容
* 建立自己的技术博客
* 作用
* 归纳学习技术知识和经验总结等
* 帮助检查技术专业性或是否存在错误
* 技术博客提供与别人交流平台
* 面试时,公司会问是否拥有技术博客
* 技术博客网站
* CSDN - 技术圈知名度最大的
http://blog.csdn.net/
* 博客园 - 老牌的技术博客
http://www.cnblogs.com/
* iteye - 专注于技术博客
http://www.iteye.com/blogs
* 开发社区
http://segmentfault.com/
* 将作品放在网上可以访问(Web前端)
* hexo - 使用nodejs编写的静态博客程序
* 地址:https://hexo.io/
* 搭建博客网站
* github
https://pages.github.com/
* gitcafe
https://gitcafe.com/
* git软件的使用
