js 鼠标拖拽元素
基础知识
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
实现效果
web qq页面上的元素基本都可以拖拽，交互性很强，增强了体验，拖拽功能带来的好处显而易见。
思路：
用户点击元素，然后拖动，实际上是onmousedown和onmousemove两个函数的嵌套。
1、用户点击元素。需要记录到鼠标点击位置的距离，因为在拖动过程中最好是保持鼠标和元素的相对距离，而不是鼠标一直处于元素左上角，用过拖拽应该都能体会。
由于没有斜线的说法，所以是保存横向距离distX和纵向距离distY两个变量。
2、拖动元素。这时候就要发挥之前保存的距离了，元素的位置是由left和top决定的，在运动过程中是不断变化的，是需要我们计算的，计算方法就是：鼠标的位置-元素边距到鼠标的距离。就成功可以拖动了。
3、虽然可以拖动了，但是元素可能会被疯狂的用户拖出可视区，可能就找不到了，所以我们最好加一个限定，不能拖出可视区。
左边距的控制好说，判断使left=0；右边距=0是一个想法，具体的实现还是要根据左边距来控制，首先得到可视区宽度（document.documentElement.clientWidth），减去元素宽度就是元素的left值。
css
<style type="text/css">
#div{
background: red;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div');
var distX=0;
var distY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
distX=oEvent.clientX-oDiv.offsetLeft; //获取边界到鼠标的距离
distY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
var x=oEvent.clientX-distX;
var y=oEvent.clientY-distY;
if(x<0){
x=0;
}
if(y<0){
y=0;
}
if(x>(document.documentElement.clientWidth-oDiv.offsetWidth))
{
x=document.documentElement.clientWidth-oDiv.offsetWidth;
}
oDiv.style.left=x+'px'; //根据鼠标位置相对定位，得到left，top值
oDiv.style.top=y+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
} }
</script>
<body>
<div id="div"></div>
</body>
js 鼠标拖拽元素的更多相关文章
- js 鼠标拖拽元素移动
<!DOCTYPE html><html> <head> <title> </title> <style media="sc ...
- js鼠标拖拽
html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...
- js 鼠标拖拽效果实现
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- juqery 拖拽元素
转自 http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...
- jQuery 鼠标拖拽排序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 【刷题】AtCoder Regular Contest 001
A.センター採点 题意:给一个只包含1.2.3.4的字符串,求出现次数最多和最少的字符 做法:还能怎么做... #include<bits/stdc++.h> #define ui uns ...
- 【CF960G】Bandit Blues（第一类斯特林数,FFT）
[CF960G]Bandit Blues(第一类斯特林数,FFT) 题面 洛谷 CF 求前缀最大值有\(a\)个,后缀最大值有\(b\)个的长度为\(n\)的排列个数. 题解 完完全全就是[FJOI] ...
- 【BZOJ2875】【NOI2012】随机数生成器（矩阵快速幂）
[BZOJ2875]随机数生成器(矩阵快速幂) 题面 Description 栋栋最近迷上了随机算法,而随机数是生成随机算法的基础.栋栋准备使用线性同余法(Linear Congruential Me ...
- pyEcharts
例子: from pyecharts import Line line = Line("我的第一个图表", "这里是副标题",width="800px ...
- numpy 从入门到遗忘
不常用的函数总是遗忘,很是困扰啊.于是痛下时间,做一个系统的总结,纯原创,都是些实际项目中常用的函数和方法,当然还有一些这边也是没有记录的,因为我在实际数据处理过程中也没有遇到过(如字符串处理等等). ...
- HDU 1024 Max Sum Plus Plus （动态规划）
HDU 1024 Max Sum Plus Plus (动态规划) Description Now I think you have got an AC in Ignatius.L's "M ...
- 火狐浏览器高度&制作简单万年历&弹出层
浏览器高度: FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...
- 惊喜的gift
情侣的饰品吧!我之前在淘宝上买了一套,挺好的,很好看呢!男的手链,女的项链,手链需要项链的钥匙才能打得开,女孩子应该都会很喜欢的吧!至少我很喜欢!而且价格也不贵,150块人民币都不到,很适合当生日礼物 ...
- Div里超出部分，省略号显示
1.一行显示并出现省略号 1)三个属性: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidde ...
- bash变量详解
bash变量详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大家都知道Shell是一门脚本语言,脚本语言的最好的优点就是我们写的代码不需要编辑就可以直接运行,当然你也可以把它归 ...