HTML5拖拽的相关知识点

本篇内容主要讲解“HTML5拖拽的相关知识点”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5拖拽的相关知识点”吧!

创新互联建站是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，小程序开发，10多年建站对混凝土搅拌机等多个方面，拥有多年的网站设计经验。

拖拽相关属性

draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值

XML/HTML Code复制内容到剪贴板

1.      

   •     列表1

     

   •     列表2

     

   •     列表3

     

   •     列表4

     

   •     列表5

     

   •     列表6

     

     

拖拽相关的事件

ondragstart：此事件在用户开始拖动元素或选择文本时触发 ondrag:元素正在拖动时触发 ondragend:用户完成元素拖放时触发 ondragleave:当被鼠标拖动的对象离开其容器范围时触发 ondragover:当某个被拖动的对象在另一对象容器范围内拖动时触发此事件，此事件发生在目标元素身上 ondrop:在一个拖动过程中，释放鼠标时触发，此事件作用在目标元素身上

dataTransfer 对象相关方法

setData(format,data):添加自定义数据格式 getData(format):获取自定义的数据格式clearData([format]):清除自定义的数据格式及数据

Event.preventDefault()

此方法是阻止事件的默认行为，在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发

实现案例：

XML/HTML Code复制内容到剪贴板

1.      

2.      

3.       

4.           

5.           

6.           

7.             .main{   

8.                 width: 800px;   

9.                 /*border: 1px solid #ccc;*/   

10.                 height: 400px;   

11.                 margin:0 auto;   

12.             }   

13.             .left{   

14.                 float: left;   

15.                 width: 25%;   

16.                 background-color: #666;   

17.                 height: 370px;   

18.                 text-align: center;   

19.                 color: black;   

20.                 padding-top:30px ;   

21.                 font-size: 110px;   

22.             }   

23.             .right{   

24.                 float: right;   

25.                 width: 69%;   

26.             }   

27.             .right ul,.right li{   

28.                margin: 0;   

29.                padding: 0;   

30.             }   

31.             .right li{   

32.                 list-style: none;   

33.                 border: 2px dashed  #666;   

34.                 background-color: #ddd;   

35.                 height: 60px;   

36.                 margin-top: 3px;   

37.                 text-indent: 30px;   

38.                 line-height: 60px;   

39.             }   

40.             .right li:hover{   

41.                 background-color: #ccc;   

42.             }   

43.             #message{   

44.   

45.                 width: 800px;   

46.                 text-align: center;   

47.                 border: 1px solid black;   

48.                 margin: 20px auto;   

49.                 font-size:28px;   

50.             }   

51.           

52.           

53.             window.onload = function(){   

54.                 var aLi = document.getElementsByTagName('li');   

55.                 var oLeft = document.getElementsByClassName('left')[0];   

56.                 var oMessage = document.getElementById('message');   

57.   

58.                 for(var i=0;i

59.                     aLi[i].index = i+1;   

60.                     aLi[i].ondragstart = function(ev){   

61.                                                 //事件对象ev   

62.                         var evev = ev || event;   

63.   

64.                         ev.dataTransfer.setData("Text",this.id);   

65.                     }   

66.   

67.                 }   

68.                 oLeft.ondrop = function(ev){   

69.   

70.                     var evev = ev || event;   

71.                     var data = ev.dataTransfer.getData("Text");   

72.                     var num = document.getElementById(data).index;   

73.                      document.getElementById(data).remove();   

74.   

75.                     oMessage.innerHTML = "列表"+num+"被放进了垃圾箱";   

76.   

77.                     this.style.color = "black";   

78.   

79.                     }   

80.                 oLeft.ondragover = function(ev){   

81.                     var evev = ev || event;   

82.                     ev.preventDefault();   

83.                 }   

84.                 oLeft.ondragenter = function(){   

85.                     this.style.color = "#fff";   

86.                 }   

87.             }   

88.           

89.       

90.       

91.           

92.             垃圾箱