【HTML5自学笔记[ 9 ]HTML5实现元素的拖放】的更多相关文章

HTML5自学笔记[ 9 ]HTML5实现元素的拖放

要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不同的事件,处理好这些事件才可以完成漂亮的拖放. 被拖放元素触发的事件有: ondragstart:该事件在鼠标按住元素开始拖动时触发. ondragend:该事件在鼠标抬起时触发. ondrag:该事件在dragstart和dragend之间连续触发(即使鼠标不移动). 目标元素触发的事件有: ondrage…

html5学习笔记(3)--主题结构元素-1

Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h1> </header> &…

[html5] 学习笔记-改良的input元素种类

在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.datatime-local类型.month类型.week类型.number类型.range类型.search类型.Tel类型.color类型 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Ty…

[html5] 学习笔记-表单新增元素与属性

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.form属性 在html4中,表单内的从属元素必须书写在表单内部,而在html5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以指定该元素从属于指定表单了. 以往的写法: <body> <form id="testform"…

Html5 自学笔记

  1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html> </html> 它们之间的文本用来描述网页 5 <body></body> 它们之间的文本描述网页上的可见内容 6 html标题标签 h1 到 h5 7 html段落 用<p>来定义的 8 html链接  html链接是用<a> 来定义的…

HTML5自学笔记[ 11 ]canvas绘图基础1

html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支持canvas的浏览器里会显示这行文字,这里的文字颜色要和canvas背景色一致才行: <canvas id="canvas1" width="1000" height="1000"> <span>该浏览器不支持canvas&…

HTML5自学笔记[ 10 ]简单的购物车拖拽

用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta charset="utf-8"> <title>购物车拖拽</title> <style> *{ margin:0; padding:0;} #proList{ overflow:hidden;} #proList li{ list-style:n…

HTML5自学笔记[ 18 ]canvas绘图基础5

获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息,一个像素用4个元素保存,分别表示红.绿.蓝和透明度. 创建图像数据:createImgData(w,h),w/h表示图像的大小,返回的也是一个ImageData对象,只要设置好data,就可以用putImgData()将该图像绘制到画布上了. 绘制图像数据:putImgData(imgData,x,…

HTML5自学笔记[ 17 ]canvas绘图基础4

绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘制后的图形大小. drawImage(oImg,x1,y1,w1,h1,x2,y2,w2,h2),该方法获取源图像的一部分进行绘制并且指定绘制起点和绘制后图像的大小,x1/y1/w1/h1表示选取源图上(x1,y1)点起宽w1高h1的部分,x2/y2/w2/h2表示将选取的部分绘制到画布(x2,y2…

HTML5自学笔记[ 4 ]js中新增的选择器方法

querySelector():参数与jQuery一样,这个方法获取一组元素中的第一个元素. querySelectorAll():获取一组元素. getElementsByClassName():获取一组class元素. 列表属性classList:返回类数组对象,包含元素所有的class:该对象包含length属性.add()方法.remove()方法和toggle()方法.…