HTML5实战培训教程与剖析之原生拖拽四可拖动dragable属性和其他成员Word文档格式.docx
《HTML5实战培训教程与剖析之原生拖拽四可拖动dragable属性和其他成员Word文档格式.docx》由会员分享，可在线阅读，更多相关《HTML5实战培训教程与剖析之原生拖拽四可拖动dragable属性和其他成员Word文档格式.docx（13页珍藏版）》请在冰点文库上搜索。
为拖动操作添加一个元素。
添加这个元素只影响数据（即增加作为拖动源而响应回调的对象），不会影响拖动操作时页面元素的外观。
直到写这篇博客的时候，只有Firefox3.5+实现这种方法了。
clearData（format）：
清除以特定格式保存的数据。
实现这个方法的浏览器有Firefox3.5+、Safari4+、IE和Safari4+。
setDragImge（element,x,y）：
指定一幅图像，当拖动发生的时候，显示在光标下方。
这个方法接收的参数有三个分别是：
要显示的HTML元素和光标在图像中的x、y坐标。
其中，HTML元素可以是一幅图像，也可以是其他元素。
是图像的话就显示图像，是其他元素的话就显示渲染后的元素。
支持的浏览器有：
Safari4+、Chrome和Firefox3.5+。
Types：
当前保存的数据类型。
这个是一个类似数组的集合，以”text”这样的字符串形式保存着数据类型。
Chrome、Firefox3.5+和IE10+。
了解过了一些理论知识，接下来一个小例子让大家更加加深理解。
dragable属性及其他成员小例子
HTML代码
[html]viewplaincopyprint?
<
ul>
<
lidraggable="
true"
>
a<
/li>
b<
false"
c<
/ul>
ahref="
divid="
div1"
/div>
CSS代码
[css]viewplaincopyprint?
li{width:
100px;
height:
30px;
border:
1px#000000solid;
margin:
20px;
list-style:
none;
}
#div1{width:
background:
red;
300px;
JavaScript代码
[javascript]viewplaincopyprint?
//dataTransfer对象:
连接拖拽细节的，在event对象下面的
//拖动不带链接的li，会起作用但不跳转链接
//拖动带连接的a，会起作用也跳转
window.onload=function（）{
varaLi=document.getElementsByTagName（'
li'
）;
varaA=document.getElementsByTagName（'
a'
varoDiv=document.getElementById（'
div1'
for（vari=0;
i<
aLi.length;
i++）{
aLi[i].ondragstart=function（ev）{//拖拽前触发
this.style.background='
yellow'
;
ev.dataTransfer.setData（'
'
hello'
//存储一个键值对:
value值必须是字符串
ev.dataTransfer.effectAllowed='
all'
ev.dataTransfer.setDragImage（this,0,0）;
};
aLi[i].ondragend=function（）{//拖拽结束触发
'
}
aA.length;
aA[i].ondragstart=function（ev）{//拖拽前触发
link'
aA[i].ondragend=function（）{//拖拽结束触发
oDiv.ondragenter=function（）{//相当于onmouseover
green'
oDiv.ondragleave=function（）{//相当于onmouseout
red'
oDiv.ondragover=function（ev）{//进入目标、离开目标之间，连续触发
ev.preventDefault（）;
//阻止默认事件：
元素就可以释放了
ev.dataTransfer.dropEffect='
//真对外部文件
oDiv.ondrop=function（ev）{//释放鼠标的时候触发
alert（ev.dataTransfer.getData（'
））;
alert（ev.dataTransfer.types）;
};
桌面拖拽到页面中的小例子
//阻止默认行为
varoFR=newFileReader（）;
varlist=ev.dataTransfer.files;
//当前拖拽的那个文件（返回的一个文件列表）
//alert（list.length）;
//type:
文件类型
//alert（list[0].type）;
oFR.onload=function（）{//读取完成，触发事件
alert（this.result）;
//读取到的信息
oFR.readAsDataURL（list[0]）;
梦龙小站<
垃圾箱删除小例子
垃圾箱<
color:
white;
1.
2.
3.[javascript]viewplaincopyprint?
4.
5.//dataTransfer对象:
6.
7.window.onload=function（）{
8.varaLi=document.getElementsByTagName（'
9.varoDiv=document.getElementById（'
10.variNow=0;
11.
12.vartargetLi=null;
13.
14.for（vari=0;
15.
16.aLi[i].ondragstart=function（ev）{//拖拽前触发
17.
18.this.style.background='
19.
20.ev.dataTransfer.setData（'
text'
this.innerHTML）;
21.
22.targetLi=this;
23.
24.};
25.
26.aLi[i].ondragend=function（）{//拖拽结束触发
27.
28.this.style.background='
29.
30.};
31.}
32.
33.oDiv.ondragenter=function（）{//相当于onmouseover
34.
35.this.style.background='
36.
37.};
38.
39.oDiv.ondragleave=function（）{//相当于onmouseout
40.
41.this.style.background='
42.
43.};
44.
45.oDiv.ondragover=function（ev）{//进入目标、离开目标之间，连续触发
46.
47.ev.preventDefault（）;
48.
49.
50.};
51.
52.oDiv.ondrop=function（ev）{//释放鼠标的时候触发
53.
54.this.style.background='
55.
56.varoText=ev.dataTransfer.getData（'
57.
58.if（targetLi）{
59.targetLi.parentNode.removeChild（targetLi）;
60.this.innerHTML='
删除的是:
+oText;
61.}
62.
63.};
64.
65.};
升级会员 