html5拖放详解,HTML5拖放使用详解

本篇教程探讨了HTML5拖放使用详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

1 html>

2 

3 

4     

5     

拖放API

6     

7        [id='dragme']{

8             width: 100px;

9             height: 100px;

10             color: #fff;

11             text-align: center;

12             line-height: 100px;

13             background-color:#aaa;

14             user-select: none;

15             cursor:pointer;

16        }

17        [id='text']{

18             width: 300px;

19             height: 300px;

20             margin-top: 20px;

21        }

22        .border{

23             border: 1px solid #aaa;

24             border-radius:.2em;

25             box-shadow:2px 2px 3px #aaa;

26        }

27        .hide{

28             display: none;

29        }

30     

31 

32 

33     

34         

请拖放

35         

36     

37     

38         var page = {

39             init : function(){

40                 this.draggable();

41                 this.perDefault();

42             },

43             draggable : function(){

44                 var source    = document.getElementById('dragme'),

45                     dest      = document.getElementById('text'),

46                     dragIcon  = document.createElement('img'),

47                     n         = 1;

48                 dragIcon.src = '';

49                 //拖放开始

50                 source.addEventListener('dragstart', function(ev){

51                     //向dataTransfer追加数据

52                     var dt = ev.dataTransfer;

53                     dt.effectAllowed = 'all';

54                     dt.setData("text/plain", n);

55                     //自定义拖放图标

56                     dt.setDragImage(dragIcon, -10, -10);

57                 },false);

58                 //拖放结束

59                 dest.addEventListener('dragend', function(ev){

60                     ev.preventDefault();

61                 },false)

62                 //被拖放

63                 dest.addEventListener('drop', function(ev){

64                     n++;

65                     //从dataTransfer对象获取数据

66                     var dt   = ev.dataTransfer,

67                         text = dt.getData("text/plain");

68                         dest.textContent += text+'  ';

69                         //阻止默认行为(拒绝被拖放)

70                         ev.preventDefault();

71                         //阻止事件冒泡

72                         ev.stopPropagation();

73                 },false)

74                 //被拖放的元素在本元素范围内移动

75                 //dropEffect拖放时的视觉效果/图标

76                 dest.addEventListener("dragover", function(ev){

77                     var dt = ev.dataTransfer;

78                     dt.dropEffect = 'link';

79                     ev.preventDefault();

80                 },false)

81             },

82             //设置页面属性，阻止默认行为

83             perDefault : function(){

84                 document.ondragover = function(e){

85                     e.preventDefault();

86                 }

87                 document.indrop = function(e){

88                     e.preventDefault();

89                 }

90             }

91         }

92         window.onload = page.init();

93     

94 

95 

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！