拖拽目标对象的方法
setData(format,data)
getData(format)
clearData([format])
addElement(element)
setDragImage(element,x,y)
setData(format,data)
将指定格式的数据赋值给dataTransfer对象,参数format定义数据的格式也就是数据的类型,data为待赋值的数据
getData(format)
从dataTransfer对象中获取指定格式的数据,format代表数据格式,data为数据。
clearData([format])
从dataTransfer对象中删除指定格式的数据,参数可选,若不给出,则为删除对象中所有的数据
addElement(element)
添加自定义图标
setDragImage(element,x,y)
设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向上的距离,y设置图标与鼠标在垂直方向上的距离。
拖拽属性值
none:不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move:把拖动的元素移动到放置目标。
copy:把拖动的元素复制到放置目标。
link:放置目标会打开拖动的元素(但拖动的元素必须是个链接URL地址)。
拖拽的node
定义三个变量
1 当前拖拽的node
2 拖拽时经过的node
3 最终放置的node
敲黑板,后面这个三个新特性是重点!!!!!
8、Web Worker
web worker 是运行在后台的 JavaScript。
Q1:JS是怎么执行的?
A1:JS是单线程执行模式。
Q2:什么是单线程模式?
A2:所有任务只能在一个线程上执行,一次只做一件事情。前面的没有执行完,后面的只能等待。
Q3:有什么不好的地方吗?
A3:1 现在的CPU大多数是多核的,计算能力牛逼到不行。单线程无法发挥出CPU计算的价值。
2 页面上JS在执行的时候会阻塞浏览器的响应,影响用户体验。毕竟页面是为用户服务的。
Q4:Web Worker解决了什么问题?
A4:为js创建多线程环境。js在主线程执行,new一个子线程在后台执行。worker完成计算的任务返回给主线程,UI交互流畅,不会被阻塞。主线程中的代码执行会导致浏览器响应阻塞,而子线程代码执行不会。主线程和子线程两者互补干扰,独立执行。
attention:操作web worker之前最重要的是检测浏览器是否支持。现在主流的浏览器对Web Worker兼容性并不高,比如Safari,更不用说IE浏览器了。但是这并不代表它没用。
if(typeof(Worker)!=="undefined") { // yes } else { // no }
创建web worker文件
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",600); } timedCount(); //计数器
创建web worker对象
上一步已经创建了一个web worker文件,现在需要在html页面调用它。