##

<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辅助线【完整版】的更多相关文章

  1. pyspider 示例二 升级完整版绕过懒加载，直接读取图片

    pyspider 示例二 升级完整版绕过懒加载,直接读取图片,见[升级写法处] #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on ...

  2. Djanjo 的app 模板路径 静态文件 完整版登录 新手三件套 以及orm

    一: django中app的概念: 一个项目可以包含多个应用(app,类似于模块,主页打开多个模块就是多个app) 创建了app,要在配置文件中注册 二:模板路径配置: 1 templates文件夹 ...

  3. 如何安全的将VMware vCenter Server使用的SQL Server Express数据库平滑升级到完整版

    背景: 由于建设初期使用的vSphere vCenter for Windows版,其中安装自动化过程中会使用SQL Server Express的免费版数据库进行基础环境构建.而此时随着业务量的增加 ...

  4. Android版的菜谱客户端应用源码完整版

    Android版的菜谱客户端应用源码完整版,这个文章是从安卓教程网转载过来的,不是本人的原创,希望能够帮到大家的学习吧. <ignore_js_op> 152936qc7jdnv6vo0c ...

  5. sed实例精解－－例说sed完整版

    原文地址:sed实例精解--例说sed完整版 作者:xiaozhenggang 最近在学习shell,怕学了后面忘了前面的就把学习和实验的过程记录下来了.这里是关于sed的,前面有三四篇分开的,现在都 ...

  6. flexbox-CSS3弹性盒模型flexbox完整版教程

    原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...

  7. 转贴　IT外企那点儿事完整版

    转贴 IT外企那点儿事完整版 第一章:外企也就那么回儿事(http://www.cnblogs.com/forfuture1978/archive/2010/04/30/1725341.html) 1 ...

  8. C#.Net 上传图片,限制图片大小,检查类型完整版

    C#.Net 上传图片,限制图片大小,检查类型完整版 源代码: 处理图片类,如检查图片大小,按宽度比例缩小图片 public class CImageLibrary{   public enum Va ...

  9. office2016 软件全集 官方下载免费完整版(含破解文件)不含垃圾软件 win10完美激活

    office2016官方下载免费完整版是新一代办公软件,office2016官方下载免费完整版已经分享到下面,office2016官方下载免费完整版包括了Word.Excel.PowerPoint.O ...

  10. 老王Python培训视频教程（价值500元）【基础进阶项目篇 – 完整版】

    老王Python培训视频教程(价值500元)[基础进阶项目篇 – 完整版] 教学大纲python基础篇1-25课时1.虚拟机安装ubuntu开发环境,第一个程序:hello python! (配置开发 ...

随机推荐

  1. Vsftp安装及配置主动模式/被动模式

     第一章.前言 FTP的主动模式(active mode)和被动模式(passive mode) 大多数的TCP服务是使用单个的连接,一般是客户向服务器的一个周知端口发起连接,然后使用这个连接进行通讯 ...

  2. ORACLE在IMP时候出现数据丢失

    IMP-00019: 由于 ORACLE 错误 12899 而拒绝行 IMP-00003: 遇到 ORACLE 错误 12899 ORA-12899: 列 "JACKEYJ".&q ...

  3. VS2010 永久配置OpenCv2.4.9 及转换到COFF 期间失败:文件无效或损坏，解决方法

    1.下载OpenCv2.4.9(win pack):http://opencv.org/releases.html 下载完成后,进行解压(win7 64位系统) 2.环境配置,配置如下图所示: 找到p ...

  4. 修改java在进程中的映像名

    java小程序用java -jar xxx.jar  启动的进程映像名都是java.exe. 如果启动多个小程序就不好区分,导致监控程序无法定位到具体需要守护的小程序上. 解决办法: 在java安装目 ...

  5. script 写在body和head的区别（WEUI中使用swiper删除）

    区别简述: 在HTML body部分中的JavaScripts会在页面加载的时候被执行.在HTML head部分中的JavaScripts会在被调用的时候才执行.   JavaScript应放在哪里 ...

  6. leetcode96

    class Solution { public: int numTrees(int n) { vector<,); f[]=; f[]=; ;i<=n;i++){ ;j<=i;j++ ...

  7. jsp页面中比较“接收数据”与“页面循环数据”是否相等

    页面中关系运算符: -lt 小于 -le   小于或者等于 -gt 大于 -ge 大于或者等于 -eq 等于 -ne 不等于 判空:<c:if test="${empty count  ...

  8. POI　richText和html的转换案例

    private XSSFRichTextString parseHtmlStrToRichText(String htmlStr) { Document document = parseHtmlStr ...

  9. R语言-图的要素颜色

    1.设置图形要素的颜色 Plot函数中,使用col=参数来决定要素的颜色 如果不指定plot type,颜色加在散点上,如果指定了plot type,例如line,则颜色加在线上 其它函数,例如bar ...

  10. [转]MAC系统下Sublime Text3 配置Python3详细教程（亲测有效）

    原文地址: https://blog.csdn.net/weixin_41768008/article/details/79859008?tdsourcetag=s_pctim_aiomsg 这段时间 ...