首页 > 代码库 > HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性
之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了。今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧。
在默认情况下,链接、文本和图像是可以拖动的,不用再写代码即可拖动。如果想让其他元素标签也可以拖动,那么只有HTML5能实现了。HTML5为所有HTML元素规定了dragable属性,表示元素是否可以拖动。链接和图像的标签中自动将dragable属性自动被设置成true,其他元素的dragable属性的默认值是false。
支持dragable属性的浏览器有:Firefox 4+、Chrome、IE 10+和Safari 5+。Opera 11.5及之前的版本是不支持HTML5的拖放功能。另外能够让Firefox支持可拖动属性必须添加一个ondragstart事件处理程序,并在dataTransfer对象中保存一些信息才可以。在IE 9及更早版本中,通过mousedown事件处理程序调用dragDrop()方法能够让任何元素可以拖动。在Safari 4及更早的版本中,必须额外给相应的元素设置CSS样式 -khtml-user-drag: element才可以拖动。
HTML5拖拽其他成员
之前介绍过有关dataTransfer对象的一些属性,但是并不是很全。下面的一些方法和属性是其中有可能漏掉的属性和方法。
addElement(element):为拖动操作添加一个元素。添加这个元素只影响数据(即增加作为拖动源而响应回调的对象),不会影响拖动操作时页面元素的外观。直到写这篇博客的时候,只有Firefox 3.5+实现这种方法了。
clearData(format):清除以特定格式保存的数据。实现这个方法的浏览器有Firefox 3.5+、Safari 4+、IE和Safari 4+。
setDragImge(element, x, y):指定一幅图像,当拖动发生的时候,显示在光标下方。这个方法接收的参数有三个分别是:要显示的HTML元素和光标在图像中的x、y坐标。其中,HTML元素可以是一幅图像,也可以是其他元素。是图像的话就显示图像,是其他元素的话就显示渲染后的元素。支持的浏览器有:Safari 4+、Chrome和Firefox 3.5+。
Types:当前保存的数据类型。这个是一个类似数组的集合,以”text”这样的字符串形式保存着数据类型。支持的浏览器有:Chrome、Firefox 3.5+和IE 10+。
了解过了一些理论知识,接下来一个小例子让大家更加加深理解。
dragable属性及其他成员小例子
HTML代码
print?
01.
[html] view plaincopyprint?
02.
03.
<
ul
>
04.
<
li
draggable
=
"true"
>a</
li
>
05.
<
li
draggable
=
"true"
>b</
li
>
06.
<
li
draggable
=
"false"
>c</
li
>
07.
</
ul
>
08.
<
a
href
=
"http://www.baidu.com/"
>d</
a
>
09.
<
div
id
=
"div1"
></
div
>
CSS代码
print?
1.
[css] view plaincopyprint?
2.
3.
li{
width
:
100px
;
height
:
30px
;
border
:
1px
#000000
solid
;
margin
:
20px
;
list-style
:
none
;}
4.
#div
1
{
width
:
100px
;
height
:
100px
;
background
:
red
;
margin
:
300px
;}
JavaScript代码
print?
01.
[javascript] view plaincopyprint?
02.
03.
//dataTransfer对象(昆明国防路医院) : 连接拖拽细节的 ,在event对象下面的
04.
//拖动不带链接的li,会起作用但不跳转链接
05.
//拖动带连接的a,会起作用也跳转
06.
07.
window.onload =
function
(){
08.
var
aLi = document.getElementsByTagName(
‘li‘
);
09.
var
aA = document.getElementsByTagName(
‘a‘
);
10.
var
oDiv = document.getElementById(
‘div1‘
);
11.
12.
for
(
var
i=0;i<aLi.length;i++){
13.
14.
aLi[i].ondragstart =
function
(ev){
//拖拽前触发
15.
16.
this
.style.background =
‘yellow‘
;
17.
18.
ev.dataTransfer.setData(
‘a‘
,
‘hello‘
);
//存储一个键值对 : value值必须是字符串
19.
20.
ev.dataTransfer.effectAllowed =
‘all‘
;
21.
22.
ev.dataTransfer.setDragImage(
this
,0,0);
23.
24.
};
25.
26.
aLi[i].ondragend =
function
(昆明国防路医院){
//拖拽结束触发
27.
28.
this
.style.background =
‘‘
;
29.
30.
};
31.
}
32.
for
(
var
i=0;i<aA.length;i++){
33.
34.
aA[i].ondragstart =
function
(ev){
//拖拽前触发
35.
36.
this
.style.background =
‘yellow‘
;
37.
38.
ev.dataTransfer.setData(
‘a‘
,
‘hello‘
);
//存储一个键值对 : value值必须是字符串
39.
40.
ev.dataTransfer.effectAllowed =
‘link‘
;
41.
42.
43.
};
44.
45.
aA[i].ondragend =
function
(){
//拖拽结束触发
46.
47.
this
.style.background =
‘‘
;
48.
49.
};
50.
}
51.
52.
oDiv.ondragenter =
function
(){
//相当于onmouseover
53.
54.
this
.style.background =
‘green‘
;
55.
56.
};
57.
58.
oDiv.ondragleave =
function
(){
//相当于onmouseout
59.
60.
this
.style.background =
‘red‘
;
61.
62.
};
63.
64.
oDiv.ondragover =
function
(ev){
//进入目标、离开目标之间,连续触发
65.
66.
ev.preventDefault();
//阻止默认事件:元素就可以释放了
67.
68.
ev.dataTransfer.dropEffect =
‘link‘
;
//真对外部文件
69.
70.
};
71.
72.
oDiv.ondrop =
function
(ev){
//释放鼠标的时候触发
73.
74.
this
.style.background =
‘red‘
;
75.
76.
alert( ev.dataTransfer.getData(
‘a‘
) );
77.
alert( ev.dataTransfer.types );
78.
79.
};
80.
81.
};
桌面拖拽到页面中的小例子
HTML代码
print?
01.
[javascript] view plaincopyprint?
02.
03.
//dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的
04.
05.
window.onload = function(){
06.
07.
var oDiv = document.getElementById(‘div1‘);
08.
09.
10.
11.
12.
oDiv.ondragenter = function(){ //相当于onmouseover
13.
14.
this.style.background = ‘green‘;
15.
16.
};
17.
18.
oDiv.ondragleave = function(){ //相当于onmouseout
19.
20.
this.style.background = ‘red‘;
21.
22.
};
23.
24.
oDiv.ondragover = function(ev){ //进入目标、离开目标之间,连续触发
25.
26.
ev.preventDefault(); //阻止默认事件:元素就可以释放了
27.
28.
ev.dataTransfer.dropEffect = ‘link‘; //真对外部文件
29.
30.
};
31.
32.
oDiv.ondrop = function(ev){ //释放鼠标的时候触发
33.
34.
ev.preventDefault(); //阻止默认行为
35.
36.
this.style.background = ‘red‘;
37.
38.
var oFR = new FileReader();
39.
40.
var list = ev.dataTransfer.files; //当前拖拽的那个文件(返回的一个文件列表)
41.
42.
//alert(list.length);
43.
44.
//type : 文件类型
45.
46.
//alert(list[0].type);
47.
48.
49.
oFR.onload = function(){ //读取完成,触发事件
50.
51.
alert(this.result); // 读取到的信息
52.
53.
};
54.
55.
oFR.readAsDataURL(list[0]);
56.
57.
};
58.
59.
};
CSS代码
print?
1.
[css] view plaincopyprint?
2.
3.
li{
width
:
100px
;
height
:
30px
;
border
:
1px
#000000
solid
;
margin
:
20px
;
list-style
:
none
;}
4.
#div
1
{
width
:
100px
;
height
:
100px
;
background
:
red
;
margin
:
300px
;}
JavaScript代码
print?
1.
[html] view plaincopyprint?
2.
3.
<div id=
"div1"
>梦龙小站</div>
垃圾箱删除小例子
HTML代码
1.
[html] view plaincopyprint?
2.
3.
<
ul
>
4.
<
li
draggable
=
"true"
>a</
li
>
5.
<
li
draggable
=
"true"
>b</
li
>
6.
<
li
draggable
=
"true"
>c</
li
>
7.
</
ul
>
8.
<
div
id
=
"div1"
>垃圾箱</
div
>
CSS代码
print?
1.
[css] view plaincopyprint?
2.
3.
li{
width
:
100px
;
height
:
30px
;
border
:
1px
#000000
solid
;
margin
:
20px
;
list-style
:
none
;}
4.
#div
1
{
width
:
100px
;
height
:
100px
;
background
:
red
;
margin
:
300px
;
color
:
white
;}
JavaScript代码
- view source
01.
[javascript] view plaincopyprint?
02.
03.
//dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的
04.
05.
window.onload =
function
(){
06.
var
aLi = document.getElementsByTagName(
‘li‘
);
07.
var
oDiv = document.getElementById(
‘div1‘
);
08.
var
iNow = 0;
09.
10.
var
targetLi =
null
;
11.
12.
for
(
var
i=0;i<aLi.length;i++){
13.
14.
aLi[i].ondragstart =
function
(ev){
//拖拽前触发
15.
16.
this
.style.background =
‘yellow‘
;
17.
18.
ev.dataTransfer.setData(
‘text‘
,
this
.innerHTML);
//存储一个键值对 : value值必须是字符串
19.
20.
targetLi =
this
;
21.
22.
};
23.
24.
aLi[i].ondragend =
function
(){
//拖拽结束触发
25.
26.
this
.style.background =
‘‘
;
27.
28.
};
29.
}
30.
31.
oDiv.ondragenter =
function
(){
//相当于onmouseover
32.
33.
this
.style.background =
‘green‘
;
34.
35.
};
36.
37.
oDiv.ondragleave =
function
(){
//相当于onmouseout
38.
39.
this
.style.background =
‘red‘
;
40.
41.
};
42.
43.
oDiv.ondragover =
function
(ev){
//进入目标、离开目标之间,连续触发
44.
45.
ev.preventDefault();
//阻止默认事件:元素就可以释放了
46.
47.
48.
};
49.
50.
oDiv.ondrop =
function
(ev){
//释放鼠标的时候触发
51.
52.
this
.style.background =
‘red‘
;
53.
54.
var
oText = ev.dataTransfer.getData(
‘text‘
);
55.
56.
if
(targetLi){
57.
targetLi.parentNode.removeChild(targetLi);
58.
this
.innerHTML =
‘删除的是:‘
+oText;
59.
}
60.
61.
};
62.
63.
};