拖拽文字辅助线对齐

<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;
            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: 1px; border-left-width: 1px;"></div>
<div id="aaa">

    Drag me around


</div>

<div id="bbb">

    align me around


</div>
</body>
</html>
原文地址：https://www.cnblogs.com/chendezhen/p/15292810.html