Javascript 事件对象进阶(一)拖拽的原理
2014-06-18 23:06
323 查看
拖拽原理
鼠标和Div的相对距离不变
三大事件
把拖拽加到document上
拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离!
那么如何计算出物体到页面左端的距离呢?
当鼠标按下的时候(onmousedown),我们获取
鼠标距离左边&顶部 的值:clientX、clientY
物体距离左边&顶部的值:offsetLeft、offsetTop
这样我们就知道了,鼠标距离物体左边&顶部的距离,即:clientX - offsetLeft;clientY- offsetTop;
当鼠标移动的时候(onmousemove),我们获取
鼠标距离左边&顶部的值:clientX、clientY
同时鼠标距离物体左边&顶部的值已经计算出了,
那么物体距离左边&顶部的值,就会得出物体的left&top值。
这就算拖拽!
鼠标和Div的相对距离不变
三大事件
把拖拽加到document上
拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离!
那么如何计算出物体到页面左端的距离呢?
当鼠标按下的时候(onmousedown),我们获取
鼠标距离左边&顶部 的值:clientX、clientY
物体距离左边&顶部的值:offsetLeft、offsetTop
这样我们就知道了,鼠标距离物体左边&顶部的距离,即:clientX - offsetLeft;clientY- offsetTop;
当鼠标移动的时候(onmousemove),我们获取
鼠标距离左边&顶部的值:clientX、clientY
同时鼠标距离物体左边&顶部的值已经计算出了,
那么物体距离左边&顶部的值,就会得出物体的left&top值。
这就算拖拽!
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height: 100px; background: red; position: absolute;} </style> <script> window.onload = function() { /* onmousedown : 选择元素 onmousemove : 移动元素 onmouseup : 释放元素 */ var oDiv = document.getElementById('div1'); oDiv.onmousedown = function(ev) { var ev = ev || event; var disX = ev.clientX - this.offsetLeft; var disY = ev.clientY - this.offsetTop; document.onmousemove = function(ev) { var ev = ev || event; oDiv.style.left = ev.clientX - disX + 'px'; oDiv.style.top = ev.clientY - disY + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; } } } </script> </head> <body> <div id="div1"></div> <div style="width: 100px; height: 100px; background: green; position: absolute; left: 400px; top: 200px;"></div> </body> </html>
相关文章推荐
- Javascript 事件对象进阶(二)拖拽的应用 - 登录框的拖拽
- Javascript拖拽&拖放系列文章3之细说事件对象第1/4页
- javascript的Document对象——事件
- javascript中的this指针、函数、事件、对象
- Javascript实现最简跨平台面向对象拖拽
- Javascript公共脚本库系列(三): 格式化事件对象/事件对象详解
- JavaScript 获取事件对象的注意点
- JavaScript[对象.属性]集锦、事件查询综合
- 用 javascript 获取当页面上鼠标(光标)位置 和 触发事件的对象 的方法
- Javascript公共脚本库系列(三): 格式化事件对象/事件对象详解
- JavaScript:window.event.srcElement(指触发事件的对象)
- 通过JavaScript/JS事件及时捕获对象的改变
- javascript进阶之对象篇(5)继承
- JavaScript对象.属性]集锦、事件查询综合
- Javascript实现最简跨平台面向对象拖拽
- Javascript公共脚本库系列(三): 格式化事件对象/事件对象详解
- javascript事件和对象绑定
- 利用IE对多帧GIF的onload事件重复执行的原理实现(JavaScript多线程的实现)
- Javascript实现最简跨平台面向对象拖拽