<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`库...
VueDraggableResizable 2新增特征:sparkles:辅助线(新)元素对齐(新)冲突检测吸附对齐默认样式优化Q交流群:138146781说明说明:组件基于进行二次开发距离上版本的修改已经过去快一年的时间了,原版组件在之前已经...
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) ...