<link rel="stylesheet" type="css/jquery-ui-1.9.2.custom.min.css">
<script language="javascript" src="js/jquery-1.8.3.js"></script>
<script language="javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<style type="text/css">
#aaa {
position: fixed;
background-color: blue;
height: 150px;
width: 150px;
}
#bbb {
position: fixed;
background-color: green;
height: 150px;
width: 150px;
top: 200px;
left: 400px;
}
#mm,#nn {
position: absolute;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
var hh = $(document).height(); //获取页面容器的高度；
//alert(hh);
$('#aaa').draggable( {
drag : function(event, ui) {
var x = ui.offset.left;
var y = ui.offset.top;
$('#mm').css("top", y);
$('#nn').css("height", hh);
$('#nn').css("left", x);
$('#mm').css("display", "block");
$('#nn').css("display", "block");
},
stop : function(event, ui) {
$('#mm').css("display", "none");
$('#nn').css("display", "none");
}
})
})
</script>
</head>
<body>
<div id="mm"
style="border-color: red; border-bottom-style: dashed; width: 100%; border-bottom-width: 1px;"></div>
<div id="nn"
style="border-color: red; border-left-style: dashed; width; 1 px; border-left-width: 1px;"></div>
<div id="aaa">
Drag me around
</div>
<div id="bbb">
align me around
</div>
</body>
</html>
分享到：
相关推荐
在这个“jQuery拖动辅助线演示”中，我们将探讨如何利用jQuery实现一个功能，即在拖动`div`元素时显示动态的辅助线，帮助用户更准确地调整元素的位置。 首先，让我们了解一下`jQuery`的基本拖动功能。`jQuery UI`库...
4. 对齐参考线的概念和实现，包括检测距离和自动对齐。 5. 可能涉及到的性能优化，如使用CSS3 transform和防抖(debounce)技术。 通过这个特效，开发者可以为网页增加更丰富的交互体验，让用户能够更直观地调整页面...
- 辅助线使用：辅助线可以帮助精准对齐，通过标尺显示距离，以便精确调整嵌套关系。 6. AP DIV与表格的转换： - 不重叠性：通过网格设置，可以防止AP DIV图层重叠。 - 网格使用：绘制AP DIV时，网格提供参考线，...
3. **辅助线与标尺**：辅助线和标尺可以帮助精确对齐和测量层的位置，提高布局精度。 **AP DIV与表格的转换** 1. **不重叠性**：通过网格设置，可以避免AP DIV层之间的重叠。 2. **网格使用**：网格提供了一种方便...
2. **计算和更新位置**：当用户拖动元素时，JavaScript会计算元素的新位置，确保其在网格内精确移动。 3. **拖拽限制**：通过JavaScript，可以限制元素只能在网格的特定单元格内移动，提供类似Photoshop的精确布局...
“网格设置”功能的作用是在“设计”视图中对Div进行那个绘制、定位或大小调整时做可视化向导，可以对齐页面中的元素。 使用“跟踪图像”功能可以采取临摹字帖的方法进行布局。可以将喜欢的某个网站进行截屏，并存...
例如，`.box`设置为相对定位，四个角落的点和辅助线使用绝对定位，并赋予特定的鼠标光标样式，以表明可拖动的方向。 3. **JavaScript部分**：在JavaScript中，我们需要获取相关元素并绑定事件监听器。首先，使用`...
它以其强大的功能、灵活性以及美观的图表展示著称，广泛应用于在线数据分析和可视化。 ##### **1.1 下载Highcharts** - **官方下载**: 访问Highcharts官方网站 (https://www.highcharts.com/) 的下载页面。 - **...
- 应用场景：作为辅助线来帮助绘制其他对象。 #### 修改命令 17. **对齐 (AL) - Align** - 功能：调整对象的位置和方向以匹配另一个对象。 - 应用场景：确保组件之间的精确对齐。 18. **面积 (AA) - Area** -...
AutoCAD是一款广泛应用于建筑、工程设计、机械制造等领域的专业计算机辅助设计（CAD）软件。其丰富的命令集是设计师进行高效精确绘图的基础。以下是对给定文件中提到的部分AutoCAD命令的详细解析： #### 一、对象...
- 使用具有明确含义的标签（如`<article>`, `<section>`），使页面结构更清晰，有利于SEO和辅助设备访问。 **10. HTML5的离线储存如何使用？工作原理？** - **离线储存**: 包括`localStorage`, `sessionStorage`和...
18. Dreamweaver中的Tracing是一个辅助工具，帮助定位网页中各元素的位置，便于设计和调试。（分数：1.00） 19. 禁止表格格子内的内容自动换行的HTML代码是`<td nowrap>`，nowrap属性防止内容换行。（分数：1.00） ...