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

pyspider 示例二升级完整版绕过懒加载，直接读取图片
pyspider 示例二升级完整版绕过懒加载,直接读取图片,见[升级写法处] #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on ...
Djanjo 的app 模板路径静态文件完整版登录新手三件套以及orm
一: django中app的概念: 一个项目可以包含多个应用(app,类似于模块,主页打开多个模块就是多个app) 创建了app,要在配置文件中注册二:模板路径配置: 1 templates文件夹 ...
如何安全的将VMware vCenter Server使用的SQL Server Express数据库平滑升级到完整版
背景: 由于建设初期使用的vSphere vCenter for Windows版,其中安装自动化过程中会使用SQL Server Express的免费版数据库进行基础环境构建.而此时随着业务量的增加 ...
Android版的菜谱客户端应用源码完整版
Android版的菜谱客户端应用源码完整版,这个文章是从安卓教程网转载过来的,不是本人的原创,希望能够帮到大家的学习吧. <ignore_js_op> 152936qc7jdnv6vo0c ...
sed实例精解－－例说sed完整版
原文地址:sed实例精解--例说sed完整版作者:xiaozhenggang 最近在学习shell,怕学了后面忘了前面的就把学习和实验的过程记录下来了.这里是关于sed的,前面有三四篇分开的,现在都 ...
flexbox-CSS3弹性盒模型flexbox完整版教程
原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...
转贴　IT外企那点儿事完整版
转贴 IT外企那点儿事完整版第一章:外企也就那么回儿事(http://www.cnblogs.com/forfuture1978/archive/2010/04/30/1725341.html) 1 ...
C#.Net 上传图片,限制图片大小,检查类型完整版
C#.Net 上传图片,限制图片大小,检查类型完整版源代码: 处理图片类,如检查图片大小,按宽度比例缩小图片 public class CImageLibrary{ public enum Va ...
office2016 软件全集官方下载免费完整版(含破解文件)不含垃圾软件 win10完美激活
office2016官方下载免费完整版是新一代办公软件,office2016官方下载免费完整版已经分享到下面,office2016官方下载免费完整版包括了Word.Excel.PowerPoint.O ...
老王Python培训视频教程（价值500元）【基础进阶项目篇 – 完整版】
老王Python培训视频教程(价值500元)[基础进阶项目篇 – 完整版] 教学大纲python基础篇1-25课时1.虚拟机安装ubuntu开发环境,第一个程序:hello python! (配置开发 ...

随机推荐

JAVA获取运行程序的src路径
JavaPrj使用: System.getProperty("user.dir")+"\\src"或直接"\\src"JavaWeb使用Th ...
py库：把python打包成exe文件（pyinstaller）
http://blog.csdn.net/be_quiet_endeavor/article/details/73929077 用Pyinstaller把Python3.4程序打包成可执行文件exe ...
编程最好用的字体consolas
python 自带idle最好用的字体consolas https://www.icourse163.org/learn/BIT-268001?tid=1002788003#/learn/forumd ...
django 开发之前后端分离开发模式
1. 什么是前后端分离开发的概念: 前端页面运行前端服务器上,负责页面的渲染(静态文件的加载)与跳转后端代码运行在后端服务器上, 负责数据的处理(提供数据请求的接口) 2. 前后端分离开发碰到的问题 ...
centos安装tree命令
centos安装tree命令 sudo yum -y install tree windows安装tree命令我的另一篇
cut命令详解
1.简介:cut:以某种方式按照文件的行进行分割 2.参数列表: -b:仅显示行中指定直接范围的内容: -c:仅显示行中指定范围的字符: -d:指定字段的分隔符,默认的字段分隔符为“TAB”: -f: ...
transform(转)
转自:https://zhuanlan.zhihu.com/p/54356280
kettle学习笔记（二）——kettle基本使用
一.子程序功能和启动方式介绍 Spoon.bat: 图形界面方式启动作业和转换设计器. Pan.bat: 命令行方式执行转换. Kitchen.bat: 命令行方式执行作业. Carte.bat: 启 ...
Blender Python脚本的6个技巧
https://www.youtube.com/watch?v=vFoh3S8MLBI&index=3&list=PLw8Sjaw0TPm0J9DXj3XGi1_9fxXezlzrM ...
Js学习（6）标准库-Array对象
Array是Js的原生对象,同时也是一个构造函数,可以用它生成新的数组用不用new结果都一样 var arr = new Array(2); // 等同于 var arr = Array(2); 但 ...

div辅助线【完整版】

div辅助线【完整版】的更多相关文章

随机推荐

热门专题