This repository has been archived by the owner on Mar 30, 2020. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathjquery-dragZone.html
executable file
·187 lines (163 loc) · 5.43 KB
/
jquery-dragZone.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery拖拽改变div大小效果</title>
<style>
* {
margin:0;
padding:0;
}
ul,ol,li {
list-style: none;
}
#wrap {
width: 870px;
height: 150px;
margin: 30px auto;
position: relative;
clear: both;
background: #eee;
}
#wrap li {
float: left;
color: white;
width: 210px;
height: 150px;
line-height: 150px;
background: #ccc;
overflow: hidden;
text-align: center;
}
#wrap li.li1 {
background: #999;
}
#wrap li.li2 {
background: #666;
}
#wrap li.li3 {
background: #333;
}
#wrap li.li4 {
background: #000;
}
#wrap .label {
float: left;
color: white;
width: 10px;
height: 150px;
cursor: e-resize;
background: red;
}
</style>
</head>
<body>
<ul id="wrap">
<li class="li1">li1</li>
<span class="label">1</span>
<li class="li2">li2</li>
<span class="label">2</span>
<li class="li3">li3</li>
<span class="label">3</span>
<li class="li4">li4</li>
</ul>
</body>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"></script>
<script>
const dragZoneBuild = () => {
/*
找到所有label
给label绑定拖动事件
如果当前label没有设置disabled
如果向左
则不能超过 - 左边的label/左边的边界 - 的位置，超过就 = 0
且，设置 1 - 当前label到左边label/左边边界 - 之间所有元素的宽度（平均）
且，设置 2 - 当前label到右边label/右边边界 - 之间所有元素的宽度（平均）
如果向右
则不能超过 - 右边的label/右边的边界 - 的位置，超过就 = 容器宽度
且，设置 2 - 当前label到左边label/左边边界 - 之间所有元素的宽度（平均）
且，设置 1 - 当前label到右边label/右边边界 - 之间所有元素的宽度（平均）
*/
// 父容器宽高信息
let $wrap = $("#wrap");
// 父容器宽度
let warpClientWidth = $wrap[0].clientWidth;
// 所有label
let labels = $wrap.find('.label');
// 给label绑定事件
labels.bind('mousedown', function(e) {
// 父容器左边绝对位置
let wrapOffsetLeft = $wrap.offset().left;
// 载体本身
let $currentLabel = $(this);
// 获取前后的所有兄弟元素
let $prevAll = $currentLabel.prevAll();
let $nextAll = $currentLabel.nextAll();
let $prevLabels = $prevAll.filter('.label');
let $nextLabels = $nextAll.filter('.label');
let $prevLabel = $prevLabels[0] ? $($prevLabels[0]) : null;
let $nextLabel = $nextLabels[0] ? $($nextLabels[0]) : null;
let prevLabelOffsetLeft = null;
let nextLabelOffsetLeft = null;
// 获取到前后紧邻的Label的距左距离
if ($prevLabels.length) prevLabelOffsetLeft = $($prevLabels[0]).offset().left;
if ($nextLabels.length) nextLabelOffsetLeft = $($nextLabels[0]).offset().left;
// 前面需要设置样式的元素集合
let prevLabelsToDo = $prevLabel ? $currentLabel.prevUntil(".label") : $prevAll;
// 后面需要设置样式的元素集合
let nextLabelsToDo = $nextLabel ? $currentLabel.nextUntil(".label") : $nextAll;
// 监听移动
$(document).bind('mousemove', function(event) {
// 鼠标X轴
let mouseX = event.pageX;
// 可移动的最小范围
// 如果左边有label，则应该是label的左边距加左边label的宽度
// 如果左边没有label，则应该是父容器的距左距离
let minScope = $prevLabel ? (prevLabelOffsetLeft + $prevLabel[0].clientWidth) : wrapOffsetLeft;
// 可移动的最大范围
// 如果右边有label，则应该是右边label的距左距离
// 否则是父容器宽度 + 父容器距左边距
let maxScope = (nextLabelOffsetLeft ? nextLabelOffsetLeft : (warpClientWidth + wrapOffsetLeft)) - $currentLabel[0].clientWidth;
// 限制最大最小范围
if (mouseX < minScope) mouseX = minScope;
if (mouseX > maxScope) mouseX = maxScope;
// 设置当前label的位置
// $currentLabel.css('left', mouseX - wrapOffsetLeft);
// 设置左边元素的宽度
if (prevLabelsToDo.length) {
let toDoWidth;
if (prevLabelOffsetLeft) {
toDoWidth = mouseX - prevLabelOffsetLeft - $currentLabel[0].clientWidth;
} else {
toDoWidth = mouseX - wrapOffsetLeft;
}
prevLabelsToDo.css('width', toDoWidth / prevLabelsToDo.length)
}
// 设置右边元素的宽度
if (nextLabelsToDo.length) {
// console.log(nextLabelsToDo);
let toDoWidth;
if (nextLabelOffsetLeft) {
toDoWidth = nextLabelOffsetLeft - mouseX;
} else {
toDoWidth = warpClientWidth - (mouseX - wrapOffsetLeft);
}
toDoWidth -= $currentLabel[0].clientWidth;
// console.log(toDoWidth, nextLabelsToDo.length);
nextLabelsToDo.css('width', toDoWidth / nextLabelsToDo.length)
}
});
});
// 移除监听事件
$(document).bind('mouseup', function(event) {
$(document).unbind('mousemove');
event.cancelBubble = true;
});
}
$(function(){
dragZoneBuild();
})
</script>
</html>