##

<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. python学习笔记_week25

    note Day25 - 博客 - KindEditor - beautifulsoup4对标签进行过滤 - 单例模式 - 事务操作 - from django.db import transacti ...

  2. leetcode312

    class Solution { public int maxCoins(int[] iNums) { int[] nums = new int[iNums.length + 2]; int n = ...

  3. leetcode647

    class Solution { public: ][],int i,int j){ if(i>=j){ return true; } else{ return DP[i][j]; } } in ...

  4. leetcode1032

    class StreamChecker: def __init__(self, words: 'List[str]'): self.maxLen = 0 self.List = set(words) ...

  5. Vue proxy

    npm run dev 我们访问的是localhost:8080 config文件夹下的index.js配置文件的dev dev: { env: require('./dev.env'), port: ...

  6. html：class名命名规范

    1 前端开发命名规范 1.1 为什么要制定CSS命名规范 统一的命名规范,便于多人开发维护时代码统一,减少项目沟通和交接的成本,增加代码的语义化. 1.2 CSS命名规则 样式类名全部用小写,首字符必 ...

  7. 初学Python的奇葩用法

    ming_piao= 11ming_yeji= 586319ming_age= 34ming_gongling= 10ming_yanjiang= 81 qiang_piao= 7qiang_yeji ...

  8. Nginx隐藏标识以及其版本号

    1.隐藏版本号 curl Nginx服务器时,有这么一行Server: nginx,说明我用的是 Nginx 服务器,但并没有具体的版本号.由于某些 Nginx 漏洞只存在于特定的版本,隐藏版本号可以 ...

  9. Linux下chkconfig命令介绍

    一.引论 chkconfig命令检查.设置系统的各种服务.这是Red Hat公司遵循GPL规则所开发的程序,它可查询操作系统在每一个执行等级中会执行哪些系统服务, 其中包括各类常驻服务.谨记chkco ...

  10. 使用@FeignClient时，报java.lang.NoClassDefFoundError: feign/Feign$Builder错

    错误信息: Caused by: java.lang.ClassNotFoundException: feign.Feign$Builder at java.net.URLClassLoader.fi ...