在underside中拖動redbox，box和redbox的橫坐標一致
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 5 <meta charset="UTF-8"> 6 <title>拖拽</title> 7 8 <style> 9 #outside { 10 border: 1px solid #99CC00; 11 background-color: #ccc; 12 width: 300px; 13 height: 300px; 14 position: relative; 15 } 16 17 #underside { 18 border: 1px solid #99aa00; 19 background-color: #ccc; 20 left: -1px; 21 width: 300px; 22 height: 50px; 23 position: relative; 24 top: 306px; 25 } 26 27 #box { 28 background: #123456; 29 width: 50px; 30 height: 50px; 31 position: absolute; 32 } 33 34 #redbox { 35 background: red; 36 width: 50px; 37 height: 50px; 38 position: absolute; 39 cursor: pointer; 40 } 41 </style> 42 43 </head> 44 <body> 45 <div id="outside"> 46 <div id="box"></div> 47 <div id="underside"> 48 <div id="redbox"></div> 49 </div> 50 </div> 51 52 53 54 55 <script language="javascript"> 56 // 初始化拖放對象 57 var box = document.getElementById("box"); 58 // 獲取頁面中被拖放元素的引用指針 59 box.style.position = "absolute"; // 絕對定位 60 // 初始化變量，標准化事件對象 61 var mx, 62 my, 63 ox, 64 oy; // 定義備用變量 65 function e(event) { // 定義事件對象標准化函數 66 if (!event) { // 兼容IE瀏覽器 67 event = window.event; 68 event.target = event.srcElement; 69 event.layerX = event.offsetX; 70 event.layerY = event.offsetY; 71 } 72 event.mx = event.pageX || event.clientX + document.body.scrollLeft; 73 // 計算鼠標指針的x軸距離 74 event.my = event.pageY || event.clientY + document.body.scrollTop; 75 // 計算鼠標指針的y軸距離 76 return event; // 返回標准化的事件對象 77 } 78 // 定義鼠標事件處理函數 79 80 81 82 $("#redbox")[0].onmousedown = function(event) { // 按下鼠標時，初始化處理 83 event = e(event); // 獲取標准事件對象 84 o = event.target; // 獲取當前拖放的元素 85 ox = parseInt(o.offsetLeft); // 拖放元素的x軸坐標 86 oy = parseInt(o.offsetTop); // 拖放元素的y軸坐標 87 mx = event.mx; // 按下鼠標指針的x軸坐標 88 my = event.my; // 按下鼠標指針的y軸坐標 89 document.onmousemove = move; // 注冊鼠標移動事件處理函數 90 document.onmouseup = stop; // 注冊松開鼠標事件處理函數 91 92 93 94 } 95 function move(event) { // 鼠標移動處理函數 96 event = e(event); 97 o.style.left = ox + event.mx - mx + "px"; // 定義拖動元素的x軸距離 98 o.style.top = oy + event.my - my + "px"; // 定義拖動元素的y軸距離 99 //紅色拖動元素 100 var y = $('#redbox').position().left; 101 var x = $('#redbox').position().top; 102 var yDiff = parseInt($("#underside").css("width").split("px")[0]) - parseInt($("#redbox").css("width").split("px")[0]); 103 console.log(y) 104 if (y > yDiff) { 105 $("#redbox").css("left", yDiff + "px") 106 107 } 108 $("#box").css("left", $("#redbox").css("left")) 109 if (y < 0) { 110 $("#redbox").css("left", 0 + "px") 111 112 } 113 if (x != 0) { 114 $("#redbox").css("top", 0 + "px") 115 116 } 117 118 } 119 function stop(event) { // 松開鼠標處理函數 120 event = e(event); 121 ox = parseInt(o.offsetLeft); // 記錄拖放元素的x軸坐標 122 oy = parseInt(o.offsetTop); // 記錄拖放元素的y軸坐標 123 mx = event.mx ; // 記錄鼠標指針的x軸坐標 124 my = event.my ; // 記錄鼠標指針的y軸坐標 125 o = document.onmousemove = document.onmouseup = null; 126 /* console.log(event.mx,event.my) */ 127 // 釋放所有操作對象 128 129 } 130 </script> 131 </body> 132 </html> 133