标签：获取 ret title 释放 parse 事件 pointer event 坐标
在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
标签：获取 ret title 释放 parse 事件 pointer event 坐标
原文地址：https://www.cnblogs.com/simeng/p/10357846.html
