吸附对齐系统

主题

  原生JS实现的吸附对齐系统。

详情

代码

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
...

#content {
border: 1px solid #ddd;
box-sizing: border-box;
height: 400px;
margin: auto;
position: relative;
width: 800px;
}

#canvas {
height: 400px;
position: absolute;
width: 800px;
}

#retangle {
background: #eee;
border: 1px solid #ccc;
box-shadow: 0 0 2px #ddd;
height: 130px;
left: 50px;
top: 10px;
width: 175px;
}

#retangle-1 {
background: #333;
border: 1px solid #000;
box-shadow: 0 0 2px #111;
height: 130px;
left: 250px;
top: 230px;
width: 175px;
}

#retangle-2 {
background: #666;
border: 1px solid #333;
box-shadow: 0 0 2px #444;
height: 130px;
left: 550px;
top: 260px;
width: 175px;
}

.retangle {
box-sizing: border-box;
cursor: pointer;
position: absolute;
}

...

<div id="content">
<canvas id="canvas" height="400" width="800"></canvas>
<div id="retangle" class="retangle"></div>
<div id="retangle-1" class="retangle"></div>
<div id="retangle-2" class="retangle"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 声明吸附参考线
var guideLines = new GuideLines();

// 初始化吸附系统
var moveSystem = new MoveSystem();

// 设置最小吸附距离
moveSystem.setABD(5);

// 设置吸附参考线
moveSystem.setGuideLines(guideLines);

// 设置吸附对齐参考线
moveSystem.setAlignLines(alignLines);

// 设置被拖动的DOM元素
moveSystem.setElement(retangle);

效果