`
leeleo
  • 浏览: 323068 次
  • 性别: Icon_minigender_1
  • 来自: 贵阳
社区版块
存档分类
最新评论

DIV图层拖动原理与实现

阅读更多

这几天做基于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 拖动

    本示例“move_div.rar_javascript 拖动”聚焦于一个常见的JavaScript应用场景:实现用户可以通过鼠标拖动HTML元素,如div图层,以进行自定义布局。这个功能在现代网页设计中非常常见,例如浮动对话框、可调整大小的...

    AJAX可以拖动的DIV块.rar

    总结来说,这个资源包将教授如何使用JavaScript和AJAX技术,结合HTML和CSS,创建一个可以拖动的`div`元素,并可能涉及到与表格和图层的交互。通过这个学习,开发者可以提高网页动态交互设计能力,提升用户的使用体验...

    【JavaScript源代码】javascript拖曳互换div的位置实现示例.docx

    总结来说,这个JavaScript拖曳互换div位置的实现利用了DOM拖放API,通过监听拖放相关的事件,并通过精心设计的DOM操作来实现元素位置的交换,为用户提供了一种直观的交互方式,常用于GIS中的图层切换顺序控制或其他...

    页面中浮动的DIV(可拖移)

    ### 页面中浮动的DIV(可拖移):深入解析与实现方法 在Web开发中,创建可拖动的元素是一项非常实用且常见的功能。本文将详细介绍如何通过HTML、CSS及JavaScript来实现页面中的一个可拖动的`&lt;div&gt;`元素,并深入探讨其...

    Js结合使用图层表格文本框实现简单编辑

    在提供的HTML代码中,可以看到一个包含表格和两个按钮的图层(div)。按钮分别用于增加和删除表格行。表格包含两列:序号和颜色。此外,还定义了一个隐藏的文本框,准备在需要编辑时显示。 对应的JavaScript代码...

    dreamweaver网页中怎么制作DIV图层?

    这可以通过选择“设计”视图中的`&lt;div&gt;`,然后在“属性”面板中修改相关样式属性来实现。 - 或者,你也可以切换到“代码”视图,直接在HTML源码中编写CSS规则,比如`&lt;style&gt;`标签内或外部样式表。 5. **预览效果**...

    各种js层特效,拖动层

    具体到压缩包中的文件名,我们可以看到涉及了层的关闭与打开、js拖放原理及代码、可拖动的网站地图和DIV拖动的许愿墙示例。这些都是JavaScript层特效和拖放功能的实际应用案例,通过分析和学习这些代码,你可以更好...

    简单的javascript特效可拖动图层、通过document对象相关属性动态改变背景色、浮动广告、广告窗口、弹窗选择

    通过JavaScript,我们可以为这些元素添加事件监听器,例如鼠标按下、移动和释放,实现图层的拖动效果。当用户点击并移动鼠标时,图层会跟随鼠标的移动而移动,增加用户交互性。实现这一功能的关键在于更新元素的CSS ...

    .net和AJAX 实现图层拖拽,类似于中国人特效

    3. **XMLHttpRequest对象**:在拖动过程中,我们可以利用XMLHttpRequest对象向服务器发送异步请求,更新图层的新位置信息,实现数据的实时同步。 4. **.NET后端**:在.NET环境中,我们可以使用C#或VB.NET等编程语言...

    可拖动的弹出层提示效果.rar

    本案例中的“可拖动的弹出层提示效果”是一个利用JavaScript(JS)实现的功能,它允许用户通过鼠标拖动来改变弹出层的位置,提升用户体验。这一技术在网页应用、移动应用以及桌面应用中都有广泛应用。 “JS特效-...

    Dreamweaver-CS5自学教程-第八课:AP-DIV元素.pdf

    - 不重叠性:通过网格设置,可以防止AP DIV图层重叠。 - 网格使用:绘制AP DIV时,网格提供参考线,帮助创建整齐的布局。 - 转换:可以将已有的表格转换为AP DIV结构,以获得更灵活的布局控制。 通过这些步骤和...

    javascript 事件处理、鼠标拖动效果实现方法详解

    窗口: 代码如下: &lt;div id=”win”&gt; &lt;div id=”win_header”&gt;&lt;/div&gt; &lt;/div&gt; 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute); 给窗口添加标题栏,这里使用一个放在...

    可关闭可拖动的图层窗口特效代码

    以上代码实现了基本的可拖动和可关闭图层窗口的功能。在实际项目中,开发者可能会结合现有的库(如jQuery UI、React、Vue等)来简化代码并增强功能,比如添加动画效果、防止窗口拖出屏幕、调整窗口大小等。 请注意...

    可拖动的层.rar

    在IT行业中,尤其是在前端开发领域,"可拖动的层"是一种常见的交互设计技术,它允许用户通过鼠标或触摸操作将页面上的元素(通常被称为“层”或“div”)在屏幕上自由移动。这种功能常见于各种应用和网页中,如日历...

    SuperMap iClient for JavaScript实现拖动半径查询附近

    在本文中,我们将深入探讨如何使用SuperMap iClient for JavaScript实现拖动半径查询附近的地理信息功能。SuperMap iClient for JavaScript是SuperMap公司推出的一款强大的JavaScript库,它提供了丰富的地图服务、...

    jQuery网页图层拖拽对齐特效.zip

    然后,我们可以编写JavaScript代码来检测拖动元素与参考线的距离,并在接近时自动对齐: ```javascript var refLines = document.querySelectorAll(".ref-line"); // 监听mousemove事件以检测对齐 $(document).on...

    动画展层关闭层并拖动.rar

    标签“动画展层关闭层并拖动.rar”进一步确认了文件内容的主题,即与实现层的动画展示、关闭以及拖动功能有关。 压缩包子文件“动画展层关闭层并拖动.htm”可能是一个HTML文件,它可能包含了一个网页示例,展示了...

    【JavaScript源代码】vue实现放大缩小拖拽功能.docx

    dialogHeaderEl.insertAdjacentHTML('beforeEnd', '&lt;div class="bigbtn"&gt;&lt;div class="changeBig"&gt;&lt;/div&gt;&lt;div class="changeSmall"&gt;&lt;/div&gt;&lt;/div&gt;'); const bigBtn = el.querySelector('.bigbtn'); const changeBig...

    JavaScript与Div对层定位和移动获得坐标的实现代码

    1:移动图层 获得点的x轴y轴坐标,从而进行绝对定位(注意:竖拉框会影响 x 轴 y 轴坐标值) 代码如下: var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() //设置属于...

    js完美实现同时拖拽、旋转、放大缩小图片的手势操作

    使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能, 解决官网移动旋转复位效果, 重点解决官网旋转rotate demo旋转乱跳bug ...(官网的demo真是坑 又是复位又是旋转抖动的....双点触控就立马旋转造成抖动...

Global site tag (gtag.js) - Google Analytics