首页 > 代码库 > 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代码

 

 

view source
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代码

view source
print?
1.[css] view plaincopyprint?
2. 
3.li{ width:100pxheight:30pxborder:1px #000000 solidmargin:20pxlist-style:none;} 
4.#div1width:100pxheight:100pxbackground:redmargin:300px;} 

 

  JavaScript代码

view source
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代码

 

view source
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代码

view source
print?
1.[css] view plaincopyprint?
2. 
3.li{ width:100pxheight:30pxborder:1px #000000 solidmargin:20pxlist-style:none;} 
4.#div1width:100pxheight:100pxbackground:redmargin:300px;} 

 

  JavaScript代码

view source
print?
1.[html] view plaincopyprint?
2. 
3.<div id="div1">梦龙小站</div>

 

 

 

  垃圾箱删除小例子

 

 

  HTML代码

view source
 
print?
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代码

 

view source
print?
1.[css] view plaincopyprint?
2. 
3.li{ width:100pxheight:30pxborder:1px #000000 solidmargin:20pxlist-style:none;} 
4.#div1width:100pxheight:100pxbackground:redmargin:300pxcolor:white;} 

 

 

  JavaScript代码

  1. view source
    print?
    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.};