拖动同级别元素显示辅助线，辅助对齐，吸附.

采用jqueryUi      draggable  组件开发。

引用JS  ：

　　<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>

　　<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>

　　<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">

 

css部分：

　　body {

　　　　font-family: courier new, courier;

　　　　font-size: 12px;

　　　　padding:0;

　　　　margin:0;

　　}

　　.draggable_list{

　　　　width:500px;height:500px;background:#ccc;position:relative;left:200px;top:200px;

　　}

　　.draggable {

　　　　border: 1px solid #ccc;

　　　　display: inline-block;

　　　　cursor: move;

　　　　position: absolute;

　　}

　　.guide {

　　　　display: none;

　　　　position: absolute;

　　　　left: 0;

　　　　top: 0;

　　}

　　#guide-h {

　　　　border-top: 1px dashed #55f;

　　　　width: 100%;

　　}

　　#guide-v {

　　　　border-left: 1px dashed #55f;

　　　　height: 100%;

　　}

 

html 部分：

 

<div class="draggable_list">

　　<!--需要拖动的div-->

　　<div class="draggable">第一个11111111111111div</div>

　　<div class="draggable">第二个22div</div>

　　<div class="draggable">第三个333333div</div>

　　<div class="draggable">第四个ggdgdgdiv</div>

　　<div class="draggable">第五个div</div>

　　<div class="draggable">第六个div</div>

　　<!--拖动辅助线-->

　　<div id="guide-h" class="guide"></div>

　　<div id="guide-v" class="guide"></div>

</div>

 

JS 部分：

　　/**

　　* 指标拖动辅助标线

　　*/

　　var MIN_DISTANCE = 8; //捕获的最小距离

　　var guides = []; // 没有可用的引导

　　var innerOffsetX, innerOffsetY;

　　

　　$(".draggable").draggable({

　　　　start: function (event, ui) {

　　　　　　guides = $.map($(".draggable").not(this), computeGuidesForElement);

　　　　　　//offsetX、offsetY：源元素（srcElement）的X,Y坐标

　　　　　　innerOffsetX = event.offsetX;

　　　　　　innerOffsetY = event.offsetY;

　　　　},

　　　　

　　　　/**

　　　　* 参数说明

　　　　* event事件的

　　　　* offsetX：

　　　　* outerwidth： 属性是一个只读的整数，声明了整个窗口的宽度。

　　　　* outerheight： 属性是一个只读的整数，声明了整个窗口的高度。

　　　　*/

　　　　

　　　　drag: function (event, ui) {

　　　　　　//迭代所有的guids，记住最近的h和v guids

　　　　　　var guideV, guideH, distV = MIN_DISTANCE + 1,

　　　　　　distH = MIN_DISTANCE + 1,

　　　　　　offsetV, offsetH;

　　　　　　var chosenGuides = {

　　　　　　　　top: {

　　　　　　　　　　dist: MIN_DISTANCE + 1

　　　　　　　　},

　　　　　　　　left: {

　　　　　　　　　　dist: MIN_DISTANCE + 1

　　　　　　　　}

　　　　　　};

　　　　　　var $t = $(this);

　　　　　　//pageX、pageY：文档坐标x、y ;

　　　　　　var pos = {

　　　　　　　　top: (event.pageY - $('.draggable_list').offset().top) - innerOffsetY ,

　　　　　　　　left: (event.pageX - $('.draggable_list').offset().left) - innerOffsetX

　　　　　　};

　　　　　　//outerHeight、outerWidth：整个浏览器的高度、宽度

　　　　　　var w = $t.outerWidth() - 1;

　　　　　　var h = $t.outerHeight() - 1;

　　　　　　var elemGuides = computeGuidesForElement(null, pos, w, h);

　　　　　　$.each(guides, function (i, guide) {

　　　　　　　　$.each(elemGuides, function (i, elemGuide) {

　　　　　　　　　　if (guide.type == elemGuide.type) {

　　　　　　　　　　　　var prop = guide.type == "h" ? "top" : "left";

　　　　　　　　　　　　var d = Math.abs(elemGuide[prop] - guide[prop]);

　　　　　　　　　　　　if (d < chosenGuides[prop].dist) {

　　　　　　　　　　　　　　chosenGuides[prop].dist = d;

　　　　　　　　　　　　　　chosenGuides[prop].offset = elemGuide[prop] - pos[prop];

　　　　　　　　　　　　　　chosenGuides[prop].guide = guide;

　　　　　　　　　　　　}

　　　　　　　　　　}

　　　　　　　　});

　　　　　　});

　　　　　　if (chosenGuides.top.dist <= MIN_DISTANCE) {

　　　　　　　　$("#guide-h").css("top", chosenGuides.top.guide.top).show();

　　　　　　　　ui.position.top = chosenGuides.top.guide.top - chosenGuides.top.offset;

　　　　　　} else {

　　　　　　　　$("#guide-h").hide();

　　　　　　　　ui.position.top = pos.top;

　　　　　　}

　　　　　　if (chosenGuides.left.dist <= MIN_DISTANCE) {

　　　　　　　　$("#guide-v").css("left", chosenGuides.left.guide.left).show();

　　　　　　　　ui.position.left = chosenGuides.left.guide.left - chosenGuides.left.offset;

　　　　　　} else {

　　　　　　　　$("#guide-v").hide();

　　　　　　　　ui.position.left = pos.left;

　　　　　　}

　　　　},

　　　　stop: function (event, ui) {

　　　　　　$("#guide-v, #guide-h").hide();

　　　　}

　　})

　　

　　function computeGuidesForElement(elem, pos, w, h) {

　　　　if (elem != null) {

　　　　　　var $t = $(elem);

　　　　　　//offset:返回当前元素 的偏移量

　　　　　　pos = $t.position();

　　　　　　pos = {

　　　　　　　　left: $t.position().left,

　　　　　　　　top: $t.position().top

　　　　　　}

　　　　　　w = $t.outerWidth() - 1;

　　　　　　h = $t.outerHeight() - 1;

　　　　}

　　　　return [{

　　　　　　type: "h",

　　　　　　left: pos.left,

　　　　　　top: pos.top

　　　　}, //垂直方向左下对齐线

　　　　{

　　　　　　type: "h",

　　　　　　left: pos.left,

　　　　　　top: pos.top + h

　　　　},

　　　　{

　　　　　　type: "v",

　　　　　　left: pos.left,

　　　　　　top: pos.top

　　　　},

　　　　{

　　　　　　type: "v",

　　　　　　left: pos.left + w,

　　　　　　top: pos.top

　　　　},

　　　　//您可以添加_any_其他指南在这里就好了（如指南10像素单元的左）

　　　　{

　　　　　　type: "h",

　　　　　　left: pos.left,

　　　　　　top: pos.top + h / 2

　　　　},

　　　　{

　　　　　　type: "v",

　　　　　　left: pos.left + w / 2,

　　　　　　top: pos.top

　　　　}];

　　}

 

 

 

 

转自   @author sdj

 

 

转载于:https://www.cnblogs.com/loverows/p/7251684.html