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>