学习HTMLT5_1 拖拽
好久没有开始写blog了,把好些东西都搬到了博客园。一直以来想做一个自己理想的系统,好好练习一下所以学的JAVAEE知识。可惜到现在没有找下一个好的UI搭档,自己又是个色废。只好自己去摸索去做UI,完成后找个色彩感强力一点的UI填充颜色。新的系统打算用HTML5和CSS3 做PC 端,然后连接android和IOS做为手持端。
计划一天学习一章HTML5,因为有HTML4的基础,学习HTML稍微有一点难度,其中可能有几个原因,第一是资料比较少,好些方法找不到释义,只能用蹩脚的英语去翻文档规范,第二是浏览器和编译器 对HTML5 还是很好,第三是自己粗心和浮躁的毛病没有一点点改变。
看着 W3School 教程 (http://www.w3school.com.cn/html5/html_5_draganddrop.asp) 开始学习。
附上一个HTML5 事件的地址(http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp) 也是 W3School 的
开始上代码。
目录结构
js 文件
/*event.preventDefault() 来避免浏览器对数据的默认处理;*/ /* * event.target 返回触发此事件的元素(事件的目标节点) * event.dataTransfer 对象 , 拖拽对象时发送数据和值。 * event.dataTransfer 对象,有2个方法 * event.dataTransfer.setDate(arg1,ag2) 拖拽时 设置对象数据和值 * arg1 参数 为 String 指定被拖动数据的类型 ,参数值为”Text“ 和"url" * arg2 参数 为 一个变体类型参数,指定被拖动的数据。该数据可以是文本,图片。 * event.dataTransfer.setDate(arg1) 得到拖拽数据的 数据。 * arg1 为 String 指定被拖动数据的类型 ,参数值为”Text“ 和"url" * */ // 当开始拖拽时,设置拖拽对象,发送数据和值 function onDrag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } //当拖拽中 function drag(ev){ ev.preventDefault(); //获得拖拽的数据 var obj =ev.dataTransfer.getData("Text"); //得到拖拽的对象,并追加到当前事件对象的子节点 ev.target.appendChild(document.getElementById(obj)); } // 拖拽结束时 function overDrag(ev){ ev.preventDefault() ; }
<!DOCTYPE html> <html > <head> <script type="text/javascript" src="../js/Drag.js"> </script> </head> <body style=""> <div style="border:1px solid yellow;height: 500px; width: 500px;position:relative;" id="dv1"> <div style="border:1px solid red;height: 200px; width: 200px;float: left;margin-top: 10px;margin-left: 10px;" id="dv2"> <img id='img1' draggable="true" ondragstart="onDrag(event)" src="../img/a.jpg"/ > </div> <div id ='dv3' ondrop="drag(event)" ondragover="overDrag(event)" style="border:1px solid blue;height: 200px; width: 200px;margin-top: 10px;margin-right: 10px; float: right;"> </div> </div> </body> </html>
运行效果:
拖拽前
拖拽后
2点开始看教程,弄清每一个方法,每一个事件,大概到3点左右,之后开始编码。到6点完成。中间调试到了2个小时左右,期间粗心的问题不说,唯一个比较致命的问题没有给<img> 标签加id
<img draggable="true" ondragstart="onDrag(event)" src="../img/a.jpg"/ >
这样行代码中 没有为 <img> 标签 加ID, 为什么没有加ID 会错,来看这行JS代码
function drag(ev){ ev.preventDefault(); //获得拖拽的数据 var obj =ev.dataTransfer.getData("Text"); //得到拖拽的对象,并追加到当前事件对象的子节点 ev.target.appendChild(document.getElementById(obj)); }
因为它需要得到对象ID的,并追加到 当前事件对象中。