首页 > > 网页制作 > css >

HTML5 拖放使用

2018-06-24 02:20:28来源：未知阅读 ()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>拖放API</title>
 6     <style>
 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     </style>
31 </head>
32 <body>
33     <div class="content">
34         <div class="border" id="dragme" draggable="true">请拖放</div>
35         <div class="border" id="text"></div>
36     </div>
37     <script>
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     </script>
94 </body>
95 </html>