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