拖放操作
在HTML4.01中超链接和图片默认可以被拖动
第一步:设置可拖放属性draggable为true
第二部:根据需求选择拖放的事件进行处理(与click、change等事件用法相同)
新添事件
dragstart:开始拖放
drag:拖放中
dragenter:拖放中进入本元素
dragover:拖放中再本元素移动
dragleave:拖放中离开本元素
drop:放开移动元素
dragend:拖放结束
注意:如果你想实现拖放过程,无论是否需要都要取消dragover事件的默认行为
document.ondragover =function(e){e.preventDefault();}
事件数据处理对象:dataTransfer
dataTransfer对象有两个主要的方法:getData()方法和setData()方法。从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数,也是getData()方法唯一的一个参数,是用来保存数据类型的字符串,取值是”text”或”URL”。
IE只定义了”text”或”URL”两种有效的数据类型,而HTML5则对此加以扩展,允许指定各种MIME类型。考虑到向后兼容,HTML5也支持”text”或”URL”,但这两种类型会被映射为”text/plain”或”text/url-list”。
setData(mime_type,data);存储数据
getdata(mime_type);取出数据
属性:
effectAllowed 控制特效
effectAllowed 用来指定当元素被拖放式所允许的视觉效果,其值如下:
uninitialized:没有给被拖动元素设置任何放置行为。
none:被拖动的元素不能有任何行为。
copy:只允许值为”copy”的dropEffect。
link:只允许值为”link”的dropEffect。
move:只允许值为”move”的dropEffect。
copyLink:允许值为”copy”和”link”的dropEffect。
copyMove:允许值为”copy”和”move”的dropEffect。
linkMove:允许值为”link”和”move”的dropEffect。
all:允许任意dropEffect。
dropEffect 控制特效
dropEffect 表示拖放操作的视觉效果这个属性的四个值如下:
none:不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move:应该把拖动的元素移动到放置目标。
copy:应该把拖动的元素复制到放置目标。
link:放置目标会打开拖动的元素(但拖动的元素必须是个链接,有URL地址)。
canvas元素(画图)
canvas元素
属性 width height
兼容性元素内容
canvas配套API
获取canvas元素
var Mycanvas = document.getElementById('Mycanvas');
获取canvas元素操作上下文getContext对象
var c = Mycanvas.getContext("2d");
用实例学习canvas的基本使用
开始绘制:beginPath();
结束绘制:closePath();//闭合路径
清除画布:clearRect(x,y,width,height);
1.绘制线段
涉及属性: