##

<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. 关于offsetParent

    不知道有多少人知道JavaScript中有offsetParent这么个属性. 关于offsetParent,我最开始见到他,是在<JavaScript高级程序设计(第3版)>第321页, ...

  2. android 开发 ScrollView 控件的一些api描述与自定义ScrollView接口回调方法

    1.正常使用ScrollView控件的一些api详解. package com.example.lenovo.mydemoapp.scrollViewDemo; import android.supp ...

  3. input 选择框改变背景小技巧

    最近在项目中遇到一个问题,想要改变input选择框的背景,然而,令我没有想到的是,竟然无法直接改变背景的颜色 通常情况下:我们都可以通过改变元素的 background-color 的值来改变元素的背 ...

  4. 438. Find All Anagrams in a String

    原题: 438. Find All Anagrams in a String 解题: 两个步骤 1)就是从s中逐步截取p长度的字符串 2)将截取出的字符串和p进行比较,比较可以用排序,或者字典比较(这 ...

  5. Mybaits

    1.Mybatis全注解形式  (在注解上不能直接使用动态Sql,必须要在前后面加上<script>SQL</script>标签,否则会报错): @Select("& ...

  6. python sqlparse 各种 token

    https://blog.csdn.net/qq_39607437/article/details/79620383 import sqlparse def look(statement): prin ...

  7. .Net 中读写Oracle数据库常用两种方式

    .net中连接Oracle 的两种方式:OracleClient,OleDb转载 2015年04月24日 00:00:24 10820.Net 中读写Oracle数据库常用两种方式:OracleCli ...

  8. oracle sql developer怎么创建用户

    学习数据库的时候,用管理员账户,会有会有很多系统自创的表,很麻烦.所以要自己创建普通用户. create user 用户名 identified by 密码;--创建用户 grant connect, ...

  9. springboot 整合 mybatis

    spirngboot 整合mybatis有两种方式 第一种 无配置文件注解版,这一种符合springboot的风格 第二种 有配置文件xml版本,这一种就是传统的模式 无论哪一种,首先都需要加入MyS ...

  10. 计算macd与ma技术指标

    MACD部分 转载自云金杞:https://blog.csdn.net/qq_26948675/article/details/72636590 数据获取于聚宽平台 import pandas as ...