鼠标拖拽定位和DOM各种尺寸详解
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>鼠标拖拽定位元素</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
}
</style>
</head> <body>
<div id="box"></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
oDiv.onmousedown = function(ev) {
var oEvent = ev;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev) {
oEvent = ev;
oDiv.style.left = oEvent.clientX - disX + "px";
oDiv.style.top = oEvent.clientY - disY + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>
</body> </html>
原理:根据 absolute 定位结合鼠标事件实现对元素的拖动定位。
DOM元素各种尺寸和窗口的各种尺寸详解:详见下图
鼠标拖拽定位和DOM各种尺寸详解的更多相关文章
- 完美实现鼠标拖拽事件,解决各种小bug,基于jquery
鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...
- 一个全新的Vue拖拽特性实现:“调整尺寸”部分
关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对调整尺寸的开发进行阐述 关于移动的开发,请参见:拖拽:移动 演示 开发步骤 下面以模块test-party为例, ...
- CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
- JavaScript鼠标拖拽特效及相关问题总结
#div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- 【狼】unity 鼠标拖拽物体实现任意角度自旋转
主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量 通过勾股定理获取拖拽长 ...
- NGUI对象跟随鼠标拖拽移动
public Camera WNGUICamera; Vector3 _WoldPosition;//指针的初始位置 // Vector3 _WoldAng; Vector3 WscreenSpace ...
- Arcgis for qml - 鼠标拖拽移动
以实现鼠标拖拽文本图层为例 GitHub:ArcGIS拖拽文本 作者:狐狸家的鱼 目的是利用鼠标进行拖拽. 实现两种模式,一种是屏幕上的拖拽,第二种是地图上图层的挪动. 屏幕上的拖拽其实跟ArcGIS ...
- html5的鼠标拖拽
鼠标拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- JAVA代理机制
JAVA代理相关主要知识如下: (1)利用代理可以在运行时创建一个实现了一组给定接口的新类. 这种功能只有在编译时无法确定需要实现哪个接口时才有必要使用. (2)假设有一个表示接口的C ...
- OC学习之道:关于Block的初级学习
[objc] view plaincopy "code" class="OC"> // // main.m // Copyright (c) 2015 ...
- Linux下ipconfig分析及C语言实现
在linux下使用ifconfigl命令能很方便的查看网卡与网线是否连通,运行ifconfig eth0命令大致输出如下: # ifconfig eth0 eth0 Link encap:Ethern ...
- Aidl跨进程通信机制-android学习之旅(87)
Aidl简介 AIDL (Android Interface Definition Language) 是一种IDL 语言,用于生成可以在Android设备上两个进程之间进行进程间通信的代码. 如果在 ...
- 《java入门第一季》之面向对象面试题(面向对象都做了哪些事情)
创建对象内存图解.
- AngularJS进阶(十五)Cookie 'data' possibly not set or overflowed because it was too large
Cookie 'data' possibly not set or overflowed because it was too large (5287 > 4096 bytes)! 注:请点击此 ...
- AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER
深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研究下,做个笔记,其中大部分为摘抄别人的,做个说明免得被人 ...
- Java学习网站大全
Java学习网站 http://www-900.ibm.com/developerWorks/cn/java/index.shtml IBM的JAVA专题--永远的蓝色巨人 http://www.hu ...
- 利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解
什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画 ...
- ssh keygen命令实现免密码通信(git库获取操作权限:开发人员添加到git库中,获取操作权限)
先看两个机器实现免密码登陆通讯: 假设 A 为客户机器,B为目标机: 要达到的目的: A机器ssh登录B机器无需输入密码: 加密方式选 rsa|dsa均可以,默认dsa 做法: 1.登录A机器 2.s ...