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:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}

4.#div1{ width:100px; height:100px; background:red; margin: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:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}

4.#div1{ width:100px; height:100px; background:red; margin: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:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}

4.#div1{ width:100px; height:100px; background:red; margin:300px; color:white;}

　　JavaScript代码

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.};

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员),布布扣,bubuko.com

时间： 2024-12-05 08:33:32

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

可拖动dragable属性

HTML5拖拽其他成员

dragable属性及其他成员小例子

桌面拖拽到页面中的小例子

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)的相关文章

HTML5实战与剖析之媒体元素(4、检测编解码器的支持和Audio构造函数)

HTML5实战与剖析之历史管理(history对象)

HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

原生拖拽,拖放事件(drag and drop)

HTML5实战与剖析之WebSockets简介

HTML5实战与剖析之Web存储机制(Web Storage)

HTML5实战与剖析之媒体元素

HTML5实战与剖析之classList属性

HTML5实战与剖析之媒体元素(6、视频实例)