div拖動時添加輔助線
運用jQueryUi實現
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>