<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>拖拽文字辅助线对齐</title>
<link rel="stylesheet" type="/socialorg/image/css/jquery-ui.min.css">
<script type="text/javascript" src="/socialorg/image/move_img.js"></script>
<script type="text/javascript" src="/highcharts/jquery.min.js"></script>
<script type="text/javascript" src="/socialorg/image/js/jquery-ui.min.js"></script>
<style type="text/css">
#aaa {
position: fixed;
background-color: blue;
height: 150px;
150px;
}
#bbb {
position: fixed;
background-color: green;
height: 150px;
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; 100%; border-bottom- 1px;"></div>
<div id="nn"
style="border-color: red; border-left-style: dashed; 1px; border-left- 1px;"></div>
<div id="aaa">
Drag me around
</div>
<div id="bbb">
align me around
</div>
</body>
</html>