div辅助线【完整版】

<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>
div辅助线【完整版】

猜你喜欢
