吸附对齐系统

作者:frank 发表日期:2016-06-01 11:25:45 更新日期:2017-10-28 16:00:43 分类:猿文色

摘要

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

正文

代码

...

#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>
// 声明吸附参考线
var guideLines = new GuideLines();

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

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

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

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

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

效果