浅析JavaScript动画模拟拖拽原理
模拟拖拽的原理：
x1等于div.offsetLeft
y1等于div.offsetTop
x2等于ev.clientX(ev表示event事件)
y2等于ev.clientY
当我们在方块上按下鼠标的时候，x2-x1即可确定。移动鼠标之后，我们用鼠标当前的位置即x4、y4减去x2-x1、y2-y1就可以得到方块现在的位置。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById('box');
oBox.onmousedown = function(ev){
// 鼠标按下
var ev = ev || event;
// 获取鼠标离div得距离
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
oBox.onmousemove = function(ev){
// 鼠标按下左键并移动
var ev = ev || event;
// 设置div移动时，它的位置
oBox.style.left = ev.clientX - mouseBoxleft + 'px';
oBox.style.top = ev.clientY - mouseBoxleft + 'px';
}
oBox.onmouseup = function(){
// 鼠标左键抬起
oBox.onmousemove = oBox.onmouseup = null;
}
}
</script>
</body>
</html>
优化代码：
【1】鼠标移动快的时候，鼠标会移出方块，这时方块就不会再跟随鼠标动了。
解决办法：就是将onmousemove和onmouseup加到document对象上
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oBox = document.getElementById('box');
oBox.onmousedown = function(ev){
// 鼠标按下
var ev = ev || event;
// 获取鼠标离div得距离
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
document.onmousemove = function(ev){
// 鼠标按下左键并移动
var ev = ev || event;
// 设置div移动时，它的位置
oBox.style.left = ev.clientX - mouseBoxleft + 'px';
oBox.style.top = ev.clientY - mouseBoxleft + 'px';
}
document.onmouseup = function(){
// 鼠标左键抬起
document.onmousemove = document.onmouseup = null;
}
}
</script>
</body>
</html>
【2】当要拖动的方块中有文字时会触发浏览器的默认行为
解决办法：1、使用return false添加到onmousedown事件中阻止浏览器的默认行为（IE除外）
2、使用全局捕获（IE）
1、使用return false添加到onmousedown事件中阻止浏览器的默认行为（IE除外）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box">模拟拖拽</div>
<script>
var oBox = document.getElementById('box');
oBox.onmousedown = function(ev){
// 鼠标按下
var ev = ev || event;
// 获取鼠标离div得距离
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
document.onmousemove = function(ev){
// 鼠标按下左键并移动
var ev = ev || event;
// 设置div移动时，它的位置
oBox.style.left = ev.clientX - mouseBoxleft + 'px';
oBox.style.top = ev.clientY - mouseBoxleft + 'px';
}
document.onmouseup = function(){
// 鼠标左键抬起
document.onmousemove = document.onmouseup = null;
}
// 阻止默认行为
return false;
}
</script>
</body>
</html>
2、使用全局捕获（IE）
全局捕获：当我们给一个元素这只全局捕获后，改元素会监听后续发生的所有事件，当有事件发生的时候就会触发改元素的事件
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" id="button1" value="弹出1" />
<input type="button" id="button2" value="弹出2" />
<script type="text/javascript">
window.onload = function(){
var Btn1 = document.getElementById('button1');
var Btn2 = document.getElementById('button2');
Btn1.setCapture();
Btn1.onclick = function(){
alert(1);
}
Btn2.onclick = function(){
alert(2);
}
}
</script>
</body>
</html>
给Btn1设置了全局捕获之后，即使我们点击了Btn2还是会触发Btn1的点击事件
在模拟拖拽中，给要拖拽的方块onmousedown添加全局捕获然后再onmouseup中取消全局捕获
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box">模拟拖拽</div>
<script>
var oBox = document.getElementById('box');
oBox.onmousedown = function(ev){
// 鼠标按下
var ev = ev || event;
// 获取鼠标离div得距离
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
// IE浏览器，全局捕获
if(oBox.setCapture){
oBox.setCapture();
}
document.onmousemove = function(ev){
// 鼠标按下左键并移动
var ev = ev || event;
// 设置div移动时，它的位置
oBox.style.left = ev.clientX - mouseBoxleft + 'px';
oBox.style.top = ev.clientY - mouseBoxleft + 'px';
}
document.onmouseup = function(){
// 鼠标左键抬起
document.onmousemove = document.onmouseup = null;
//IE下，释放全局捕获 releaseCapture();
if ( oBox.releaseCapture ) {
oBox.releaseCapture();
}
}
// 阻止默认行为
return false;
}
</script>
</body>
</html>
【3】封装模拟拖拽函数
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box">模拟拖拽</div>
<script>
var oBox = document.getElementById('box');
drag(oBox);
function drag(obj){
obj.onmousedown = function(ev){
// 鼠标按下
var ev = ev || event;
// 获取鼠标离div得距离
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
// IE浏览器，全局捕获
if(obj.setCapture){
obj.setCapture();
}
document.onmousemove = function(ev){
// 鼠标按下左键并移动
var ev = ev || event;
// 设置div移动时，它的位置
obj.style.left = ev.clientX - mouseBoxleft + 'px';
obj.style.top = ev.clientY - mouseBoxleft + 'px';
}
document.onmouseup = function(){
// 鼠标左键抬起
document.onmousemove = document.onmouseup = null;
//IE下，释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
// 阻止默认行为
return false;
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
利用JavaScript实现拖拽改变元素大小
大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小 代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下
-
js拖拽功能实现代码解析
本文解决的问题: 1.怎样在网页中实现拖曳功能: 2.document.documentElement与document.body的区别. document.documentElement.clientWidth指整个html文档的宽度,document.body.clientWidth的宽度.这两者是不一样的.可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试. 3.getBou
-
js 表格排序(编辑+拖拽+缩放)
Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ over
-
原生js实现弹出层登录拖拽功能
在WEB开发过程中,总会遇到一些从未接触过的需求,总是想尽一切办法去研究,最终实现效果,在实现效果的那一刻成就感爆棚,有木有? 留言墙.弹出框等一些常见地方都有拖拽功能,方便用户体验嘛. 实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight),窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理. 之前做的比较多的留言墙效
-
js实现小窗口拖拽效果
本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 300px; width: 300px; background-color: green; po
-
基于JavaScript实现右键菜单和拖拽功能
下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {
-
js完美的div拖拽实例代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
js实现的简练高效拖拽功能示例
本文实例讲述了js实现的简练高效拖拽功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html"
-
鼠标拖拽移动子窗体的JS实现
1.子窗体 在设计网站的时候,我们需要设计一些模态的子窗体,比如 这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码 代码如下: <div class="modal-background"></div> <div class="modal-window"> <div class="head"> <center>点住着块区域可以改
-
Sortable.js拖拽排序使用方法解析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上 ondragover 事件:拖拽元素在目
-
js实现拖拽效果
首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20
-
JS基于面向对象实现的拖拽功能示例
本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit
-
JS实现拖拽的方法分析
本文实例分析了JS实现拖拽的方法.分享给大家供大家参考,具体如下: 分析: 1.鼠标按下,拖拽开始,鼠标移动,拖拽进行,鼠标抬起,拖拽结束(三个事件) 2.被拖动元素与鼠标之间的位置在拖动过程中始终不变,利用这个原理,被拖动元素的位置就是鼠标的左(上)边距-鼠标与被拖动元素之间的距离 注意:onmousemove应该是在onmousedown发生时进行,不然不需要点击也能拖动了. 用户可能会将拖动层脱出窗口外. 核心代码: window.onload=function(){ var box=do