html5之拖拽(1)

浏览数：50 / 时间：2015年06月09日

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>图像拖动</title>
  6 
  7 
  8     <style>
  9         body {
 10             margin: 0px;;
 11         }
 12 
 13         .container {
 14             background-color: lightcyan;
 15             width: 1000px;
 16             height: 500px;
 17         }
 18 
 19         .box {
 20             background-color: lightblue;
 21             width: 400px;
 22             height: 400px;
 23             float: left;
 24             margin: 10px;;
 25         }
 26 
 27         #box1 {
 28 
 29         }
 30 
 31         #box2 {
 32 
 33         }
 34     </style>
 35 
 36     <script>
 37         //初始化工作
 38         function initLoad() {
 39             var box1, box2, img1;
 40             initElements();
 41 
 42             box1.ondragenter = ondragenter;
 43             box2.ondragenter = ondragenter;
 44 
 45             box1.ondragover = ondragover;
 46             box2.ondragover = ondragover;
 47 
 48             box1.ondrop = ondrop;
 49             box2.ondrop = ondrop;
 50 
 51             box1.ondragleave = ondragleave;
 52 
 53             img1.ondragstart = ondragstart;
 54             img1.ondragend = function (event) { //结束拖动
 55                 showMsg("end");
 56             }
 57 
 58             function ondragenter(event) {
 59                 showMsg("ondragenter   拖动物体进入啦(即一开始拖动进入那一刻)");
 60             }
 61 
 62             //物体拖动进入中
 63             function ondragover(event) {
 64                 showMsg("ondragover   有物体拖动在上面(即一直按住左键拖动)");
 65                 event.preventDefault(); //阻止浏览器默认的属性
 66             }
 67 
 68             //物体拖动放置时
 69             function ondrop(event) {
 70                 showMsg("ondrop  物体放置时(即松开左键)");
 71                 event.preventDefault();
 72 
 73                 //showMsg(event);
 74                 showMsg(event.clientX)
 75                 showMsg(event.clientY)
 76 
 77                 //获取该节点id
 78                 var id = event.dataTransfer.getData("dataId");
 79                 var childNode = getElement(id); //获取节点
 80                 event.target.appendChild(childNode);//添加节点
 81             }
 82 
 83             //拖动离开
 84             function ondragleave(event) {
 85                 showMsg("ondragleave  离开啦");
 86             }
 87 
 88 
 89             //图像拖动时
 90             function ondragstart(event) {
 91                 showMsg("图像被拖动中...")
 92                 //设置传递的数据封装
 93                 event.dataTransfer.setData("dataId", event.target.id);
 94             }
 95 
 96             //初始化元素
 97             function initElements() {
 98                 showMsg("初始化元素");
 99                 box1 = getElement("box1");
100                 box2 = getElement("box2");
101                 img1 = getElement("img1");
102             }
103 
104             //根据id获取元素的简写
105             function getElement(id) {
106                 return document.getElementById(id);
107             }
108 
109         }
110 
111         //打印信息
112         function showMsg(obj) {
113             console.log(obj);
114         }
115         function showMsg(msg) {
116             console.log(msg);
117         }
118 
119 
120     </script>
121 
122 </head>
123 <body onload="initLoad()">
124 
125 <div class="container">
126     <p>这是一个网页上的图像拖动测试</p>
127 
128     <div id="box1" class="box"></div>
129     <div id="box2" class="box"></div>
130     <img src="images/html5.png" id="img1" alt="可以拖动我" draggable="true"/><!--img 默认可以拖拽-->
131 </div>
132 
133 </body>
134 </html>