如何实现div拖拽时出现辅助线，以方便和其它div很容易的对齐。
<link rel="stylesheet" type="css/jquery-ui-1.9.2.custom.min.css">
<script language="javascript" src="js/jquery-1.8.3.js"></script>
<script language="javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<style type="text/css">
#aaa {
position: fixed;
background-color: blue;
height: 150px;
width: 150px;
}
#bbb {
position: fixed;
background-color: green;
height: 150px;
width: 150px;
top: 200px;
left: 400px;
}
#mm,#nn {
position: absolute;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
var hh = $(document).height(); //获取页面容器的高度；
//alert(hh);
$('#aaa').draggable( {
drag : function(event, ui) {
var x = ui.offset.left;
var y = ui.offset.top;
$('#mm').css("top", y);
$('#nn').css("height", hh);
$('#nn').css("left", x);
$('#mm').css("display", "block");
$('#nn').css("display", "block");
},
stop : function(event, ui) {
$('#mm').css("display", "none");
$('#nn').css("display", "none");
}
})
})
</script>
</head>
<body>
<div id="mm"
style="border-color: red; border-bottom-style: dashed; width: 100%; border-bottom-width: 1px;"></div>
<div id="nn"
style="border-color: red; border-left-style: dashed; width; 1 px; border-left-width: 1px;"></div>
<div id="aaa">
Drag me around
</div>
<div id="bbb">
align me around
</div>
</body>
</html>
<script language="javascript" src="js/jquery-1.8.3.js"></script>
<script language="javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<style type="text/css">
#aaa {
position: fixed;
background-color: blue;
height: 150px;
width: 150px;
}
#bbb {
position: fixed;
background-color: green;
height: 150px;
width: 150px;
top: 200px;
left: 400px;
}
#mm,#nn {
position: absolute;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
var hh = $(document).height(); //获取页面容器的高度；
//alert(hh);
$('#aaa').draggable( {
drag : function(event, ui) {
var x = ui.offset.left;
var y = ui.offset.top;
$('#mm').css("top", y);
$('#nn').css("height", hh);
$('#nn').css("left", x);
$('#mm').css("display", "block");
$('#nn').css("display", "block");
},
stop : function(event, ui) {
$('#mm').css("display", "none");
$('#nn').css("display", "none");
}
})
})
</script>
</head>
<body>
<div id="mm"
style="border-color: red; border-bottom-style: dashed; width: 100%; border-bottom-width: 1px;"></div>
<div id="nn"
style="border-color: red; border-left-style: dashed; width; 1 px; border-left-width: 1px;"></div>
<div id="aaa">
Drag me around
</div>
<div id="bbb">
align me around
</div>
</body>
</html>