胡汉三归来
搬家了,隔了好几天没写流水账文章了,很讨厌现在的自己,为什么有梦想不去努力。你现在所做的都不及刻苦的万分之一,却又叫苦连天。在上班的这段时间,很多时候都感觉是在浪费时间......
这几天
在没写博客的这几天,看了SVG和mathML两部分,没写博客对这部分知识好慌啊。SVG(scalable vector graphics)可伸缩矢量图形,一个基于XML的图形语言?(没记住)。math元素<mi><mo><mn><msup><mrow>等是用来进行数学上的文本编辑的,可是我没做出效果要的是x的平方我写完代码,显示的是x2,无语,可能是浏览器兼容问题。没怎么搞懂为什么。拖放
任何元素都能拖放。在讲解的列子中,将一个元素设置为可拖放,为两个元素分别添加事件,被拖放元素加了一个拖放开始的事件并配以函数,另一添加两个事件一个是拖放经过是的函数一个是拖放放置时的。经过这一波理解,我想到了,在body中添加拖放放置函数,以及在元素拖放在不同位置时的页面其它元素反应,(对就是联想到了玩手机长按时的拖放和删除,好神奇,感觉就是这里来的。)
遇到的第一个问题:拖放放置无效,处理方式,想了一下,无代码敲写错误,于是将被放置区域的两个事件函数对调,问题完美解决。小总结:后两个事件理解不透测。
<!doctype html> <html> <head> <title>mathML标记</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css" rel="stylesheet"> #youdad{ margin:0px auto; width:400px; height:300px; border:55px solid #aaa; } </style> <script> function dragst(ev){ ev.dataTransfer.setData("text",ev.target.id) } function dragover(ev){ ev.preventDefault(); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p id="one" draggable="true" ondragstart="dragst(event)">电话本</p> <p id="two" draggable="true" ondragstart="dragst(event)">信息</p> <p id="three" draggable="true" ondragstart="dragst(event)">记事本</p> <div id="youdad" ondrop="drop(event)" ondragover="dragover(event)"></div> </body> </html>
拖放的介绍一共四行代码:
1、ev.dataTransfer.setData("text",ev.target.id);作用是获得点击元素的内容;
2、ev.preventDefault(),作用是当鼠标点击拖放元素或时避免激发他的默认方法;
3、var data=ev.DataTransfer.getData("text"),获得拖放元素的内容;
4、ev.target.appendChild(document.getElementById(data));将拖放元素放进这里;
好无语,不知道怎么处理这些毫无感觉的语句,到时候运用是在办呢如果没记住???