这几天做基于Web页面的套打程序,用到了图层的拖动,在网上找了些资料,来说明原理及实现代码,总结如下:
原理图:
说明下:
O(0,0),表示窗口内容区左上角坐标;
T(x1,y1),表示拖动前,层的左上角顶点坐标;
M(xm,ym),M=Mouse,此点表示,正准备拖动瞬间,鼠标与DIV接触点的坐标;
M'(x'm,y'm),表示拖动后放手前,鼠标与DIV接触点的坐标;
T'(x?,y?),拖动后层所在的位置的左上角顶点坐标;
拖动原理:
1,鼠标按下,启动拖动
2,鼠标放手,停止拖动
3,鼠标移动,DIV的左上角顶点坐标发生变化,这种变化与鼠标的坐标有密切关系
4,拖动过程中,鼠标相对层是静止的
原理解析及实现:
对于原理1,原理2,有点像开关,我们可用一变量来实现"启动拖动","停止拖动"控制,js如下:
var v=0;
function getV(s){
v=s;
}
对于原理3,还得回头看上面图片,再结合原理4:
由于鼠标相对层是静止的,可以得出(高中物理告诉我们的):
xm-x1=x'm-x?
ym-y1=y'm-y?
变化一下:
x?=x'm-(xm-x1)
y?=y'm-(ym-y1)
为什么要求x?,y?呢?,这就是为了响应原理3,得出变化关系
接下来就是如何求的问题:
对于鼠标的X坐标,我们可以用event.clientX表示,同理,
对于鼠标的Y坐标,我们可以用event.clientY表示
(备注:仅IE)
层的左边与窗口的左边距离,用 "层.style.pixelLeft"表示;
层的顶边与窗口的顶边距离,用 "层.style.pixelTop"表示;--好像有点问题??
但是,下面的关系如何求得?
xm-x1
ym-y1
在正准备拖动瞬间,鼠标不是与拖动层有接触吗?考虑这一瞬间,就得对getV(s)进行改写啦,
function getV(s){
v=s;
var x=event.clientX-层.style.pixelLeft;
var y=event.clientY-层.style.pixelTop;
}
所以,
x?=x'm-(xm-x1)
y?=y'm-(ym-y1)
就变成:
x?=x'm-x
y?=y'm-x
即:
层.style.pixelLeft=event.clientX-x;
层.style.pixelTop=event.clientY-y;
下面是原码:
<script>
function $(ID){
return document.getElementById(ID);
}
var v=0;
var x,y;
function getV(s){
v=s;
x=event.clientX-$("aryee").style.pixelLeft;
y=event.clientY-$("aryee").style.pixelTop;
}
function dragit(ID){
if(v==0){
return false;
}else{
$(ID).style.pixelLeft=event.clientX-x;
$(ID).style.pixelTop=event.clientY-y;
}
}
</script>
<body onmousemove="dragit('aryee')" onmouseup="v=0">
<div style="background:#CCC;width:100px;height:100px;position:absolute;" id="aryee" onmousedown="getV('aryee')"> </div>
</body>
分享到:
相关推荐
本示例“move_div.rar_javascript 拖动”聚焦于一个常见的JavaScript应用场景:实现用户可以通过鼠标拖动HTML元素,如div图层,以进行自定义布局。这个功能在现代网页设计中非常常见,例如浮动对话框、可调整大小的...
总结来说,这个资源包将教授如何使用JavaScript和AJAX技术,结合HTML和CSS,创建一个可以拖动的`div`元素,并可能涉及到与表格和图层的交互。通过这个学习,开发者可以提高网页动态交互设计能力,提升用户的使用体验...
总结来说,这个JavaScript拖曳互换div位置的实现利用了DOM拖放API,通过监听拖放相关的事件,并通过精心设计的DOM操作来实现元素位置的交换,为用户提供了一种直观的交互方式,常用于GIS中的图层切换顺序控制或其他...
### 页面中浮动的DIV(可拖移):深入解析与实现方法 在Web开发中,创建可拖动的元素是一项非常实用且常见的功能。本文将详细介绍如何通过HTML、CSS及JavaScript来实现页面中的一个可拖动的`<div>`元素,并深入探讨其...
在提供的HTML代码中,可以看到一个包含表格和两个按钮的图层(div)。按钮分别用于增加和删除表格行。表格包含两列:序号和颜色。此外,还定义了一个隐藏的文本框,准备在需要编辑时显示。 对应的JavaScript代码...
这可以通过选择“设计”视图中的`<div>`,然后在“属性”面板中修改相关样式属性来实现。 - 或者,你也可以切换到“代码”视图,直接在HTML源码中编写CSS规则,比如`<style>`标签内或外部样式表。 5. **预览效果**...
具体到压缩包中的文件名,我们可以看到涉及了层的关闭与打开、js拖放原理及代码、可拖动的网站地图和DIV拖动的许愿墙示例。这些都是JavaScript层特效和拖放功能的实际应用案例,通过分析和学习这些代码,你可以更好...
通过JavaScript,我们可以为这些元素添加事件监听器,例如鼠标按下、移动和释放,实现图层的拖动效果。当用户点击并移动鼠标时,图层会跟随鼠标的移动而移动,增加用户交互性。实现这一功能的关键在于更新元素的CSS ...
3. **XMLHttpRequest对象**:在拖动过程中,我们可以利用XMLHttpRequest对象向服务器发送异步请求,更新图层的新位置信息,实现数据的实时同步。 4. **.NET后端**:在.NET环境中,我们可以使用C#或VB.NET等编程语言...
本案例中的“可拖动的弹出层提示效果”是一个利用JavaScript(JS)实现的功能,它允许用户通过鼠标拖动来改变弹出层的位置,提升用户体验。这一技术在网页应用、移动应用以及桌面应用中都有广泛应用。 “JS特效-...
- 不重叠性:通过网格设置,可以防止AP DIV图层重叠。 - 网格使用:绘制AP DIV时,网格提供参考线,帮助创建整齐的布局。 - 转换:可以将已有的表格转换为AP DIV结构,以获得更灵活的布局控制。 通过这些步骤和...
窗口: 代码如下: <div id=”win”> <div id=”win_header”></div> </div> 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute); 给窗口添加标题栏,这里使用一个放在...
以上代码实现了基本的可拖动和可关闭图层窗口的功能。在实际项目中,开发者可能会结合现有的库(如jQuery UI、React、Vue等)来简化代码并增强功能,比如添加动画效果、防止窗口拖出屏幕、调整窗口大小等。 请注意...
在IT行业中,尤其是在前端开发领域,"可拖动的层"是一种常见的交互设计技术,它允许用户通过鼠标或触摸操作将页面上的元素(通常被称为“层”或“div”)在屏幕上自由移动。这种功能常见于各种应用和网页中,如日历...
在本文中,我们将深入探讨如何使用SuperMap iClient for JavaScript实现拖动半径查询附近的地理信息功能。SuperMap iClient for JavaScript是SuperMap公司推出的一款强大的JavaScript库,它提供了丰富的地图服务、...
然后,我们可以编写JavaScript代码来检测拖动元素与参考线的距离,并在接近时自动对齐: ```javascript var refLines = document.querySelectorAll(".ref-line"); // 监听mousemove事件以检测对齐 $(document).on...
标签“动画展层关闭层并拖动.rar”进一步确认了文件内容的主题,即与实现层的动画展示、关闭以及拖动功能有关。 压缩包子文件“动画展层关闭层并拖动.htm”可能是一个HTML文件,它可能包含了一个网页示例,展示了...
dialogHeaderEl.insertAdjacentHTML('beforeEnd', '<div class="bigbtn"><div class="changeBig"></div><div class="changeSmall"></div></div>'); const bigBtn = el.querySelector('.bigbtn'); const changeBig...
1:移动图层 获得点的x轴y轴坐标,从而进行绝对定位(注意:竖拉框会影响 x 轴 y 轴坐标值) 代码如下: var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() //设置属于...
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能, 解决官网移动旋转复位效果, 重点解决官网旋转rotate demo旋转乱跳bug ...(官网的demo真是坑 又是复位又是旋转抖动的....双点触控就立马旋转造成抖动...