拖放是一种非常流行的用户界面模式.
具体概念:
创建一个绝对定位的元素,使其在一定的范围内可以用鼠标按压移动. 当按下拖动元素的右下角元素时 可以改变可拖动元素的宽高
核心技术思想:
通过计算鼠标的相对计算位移,让按压的元素同样移动相同的距离.
技术难点:
元素在页面中的位置和鼠标在页面中的位置.
相关案例:
淘宝商城中的宝贝详情的放大镜特效.
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 .box {
11 800px;
12 height: 500px;
13 margin: 20px auto;
14 position: relative;
15 border: 1px solid #000000;
16 }
17
18 .box .move {
19 50px;
20 height: 50px;
21 background-color: brown;
22 position: absolute;
23 top: 0;
24 left: 0;
25 }
26
27 .box .move .change {
28 10px;
29 height: 10px;
30 position: absolute;
31 right: -5px;
32 bottom: -5px;
33 border-radius: 50%;
34 background-color: chartreuse;
35 }
36 </style>
37 </head>
38
39 <body>
40 <div class="box">
41 <div class="move">
42 <div class="change">
43 </div>
44 </div>
45 </div>
46
47 <script>
48 //容器元素对象
49 var box = document.querySelector(".box");
50 //按压拖动对象
51 var move = document.querySelector(".move");
52 //按压可以调整可拖动对象的大小
53 var change = document.querySelector(".change");
54
55 move.onmousedown = function (e) {
56 console.log("移动元素的事件发生");
57 //获取鼠标按下时鼠标在视口中的位置
58 var mouseOldX = e.clientX;
59 var mouseOldY = e.clientY;
60 //获取移动元素在限制框架中的位置
61 var moveLeft = move.offsetLeft;
62 var moveTop = move.offsetTop;
63
64 box.onmousemove = function (e) {
65 //获取鼠标移动的距离
66 var mouseNewX = e.clientX;
67 var mouseNewY = e.clientY;
68 //计算移动元素的移动距离
69 var resultLeft = mouseNewX - mouseOldX + moveLeft;
70 var resultTop = mouseNewY - mouseOldY + moveTop;
71
72 if (resultLeft < 0) {
73 resultLeft = 0;
74 } else if (resultLeft > box.offsetWidth - move.offsetWidth) {
75 resultLeft = box.offsetWidth - move.offsetWidth;
76 }
77 if(resultTop < 0){
78 resultTop = 0;
79 }else if(resultTop > box.offsetHeight - move.offsetHeight){
80 resultTop = box.offsetHeight - move.offsetHeight;
81 }
82 move.style.top = resultTop + "px";
83 move.style.left = resultLeft + "px";
84 }
85 }
86
87
88 change.onmousedown = function (e) {
89 //高级浏览器阻止冒泡事件e.stopPropagation();IE阻止事件冒泡要使用属性 e.cancelBubble = true;
90 e.stopPropagation();
91 //获取鼠标按下时鼠标在视口中的位置
92 var mouseOldX = e.clientX;
93 var mouseOldY = e.clientY;
94 //获取移动元素在限制框架中的位置
95 var moveLeft = change.offsetLeft;
96 var moveTop = change.offsetTop;
97
98 box.onmousemove = function (e) {
99 //获取鼠标移动的距离
100 var mouseNewX = e.clientX;
101 var mouseNewY = e.clientY;
102 //计算移动元素的移动距离
103 var resultLeft = mouseNewX - mouseOldX + moveLeft;
104 var resultTop = mouseNewY - mouseOldY + moveTop;
105
106 //判断元素的宽和高在父元素的限制
107 if (resultLeft < 0) {
108 resultLeft = 0;
109 } else if (resultLeft > box.offsetWidth) {
110 resultLeft = box.offsetWidth;
111 }
112 if(resultTop < 0){
113 resultTop = 0;
114 }else if(resultTop > box.offsetHeight){
115 resultTop = box.offsetHeight;
116 }
117 move.style.height = resultTop + "px";
118 move.style.width = resultLeft + "px";
119 }
120 }
121 //鼠标松开事件,令鼠标移动事件为null,即鼠标抬起后,元素不再跟随鼠标移动变化
122 box.onmouseup = function(){
123 box.onmousemove = null;
124 }
125
126
127
128 </script>
129 </body>
130
131 </html>