##

<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. MyISAM与InnoDB两者之间区别与选择，详细总结，性能对比

    1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...

  2. TensorFlow NormLization

    local_response_normalization local_response_normalization出现在论文”ImageNet Classification with deep Con ...

  3. python：爬虫获取淘宝/天猫的商品信息

    [需求]输入关键字,如书包,可以搜索出对应商品的信息,包括:商品标题.商品链接.价格范围:且最终的商品信息需要符合:包邮.价格差不会超过某数值 #coding=utf-8 ""&q ...

  4. Rabbitmq(6) 主题模式

    * 匹配1个 # 匹配所有 发送者: package com.aynu.bootamqp.service; import com.aynu.bootamqp.commons.utils.Amqp; i ...

  5. mac os High Sierra 升级错误

    升级mac OS High Sierra错误 已经成功从10.10升级到10.12.8 mac OS  Sierra了.就是升级到10.13报错. you may not install to thi ...

  6. 无法启动 nexus 服务，错误1067：进程意外终止。java环境变量设置技巧。

    Nexus启动失败 wrapper.log记载: 无支持版本 51.0,版本51.0指的是Java1.7. 分析: nexus版本为2.14.8,适用JRE版本为1.7. 已配置JAVA_HOME为1 ...

  7. java书籍

    1.«java高并发编程详解 »一本比较详细介绍多线程的书籍,个人感觉比 并发编程思想 这本书详细

  8. codeforces 1041A Heist

    electronic a.电子的 heist v.抢劫 in ascending order 升序 indice n.标记 device n.装置设备 staff n.职员 in arbitrary ...

  9. wheel

    http://guoqiao.me/post/2015/1212-pip-install-offline-via-wheels python wheel -r requirements.txt 下载 ...

  10. Node.js 初识1

    测试:让Node.js运行脚本 1.创建一个脚本 js1.js console.log('测试'); 2.cmd界面 运行脚本