##
<html> <head> <link rel="stylesheet" type="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css"> <style type="text/css"> .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 solid #666; width: 100%; } #guide-v { border-left: 1px solid #666; height: 100%; } </style> </head> <body> <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> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script language="javascript" src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript"> 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; }, /** * 参数说明 * @param event * @param ui * * 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 - innerOffsetY, left: event.pageX - 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.offset(); 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 } ]; } </script> </body> </html>