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动画-模拟拖拽的更多相关文章

javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容前面的话从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
day25—JavaScript实现文件拖拽上传案例实践
转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...
模拟拖拽图片碰撞检测 DOM 鼠标事件闭包
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
JavaScript：鼠标拖拽效果
(之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang=&quo ...
JavaScript实现图片拖拽、粘贴上传
前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. ...
javascript实现的拖拽回放
这个功能很简单,直接贴代码啊: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
c++ 发送消息，模拟拖拽文件
#include <ShlObj.h> BOOL SimulateDropFile(CString strFilePath) { }; wcstombs(szFile, strFilePa ...
Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）
本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

随机推荐

【流量劫持】躲避 HSTS 的 HTTPS 劫持
前言 HSTS 的出现,对 HTTPS 劫持带来莫大的挑战. 不过,HSTS 也不是万能的,它只能解决 SSLStrip 这类劫持方式.但仔细想想,SSLStrip 这种算劫持吗? 劫持 vs 钓鱼 ...
2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
关于Raid0,Raid1,Raid5,Raid10的总结
RAID0 定义: RAID 0又称为Stripe或Striping,它代表了所有RAID级别中最高的存储性能.RAID 0提高存储性能的原理是把连续的数据分散到多个磁盘上存取,这样,系统有数据请求就 ...
SQLServer 版本之八大方法搞清 "我是谁"
你正在使用 SQL Server 的哪个版本? 贴士:作为一个SQL Server数据库管理者或维护.支持人员,应该会经常问自己这样一个问题:我当前SQL Server版本号是?当前版本已经有的累计更 ...
IL异常处理
异常处理在程序中也算是比较重要的一部分了,IL异常处理在C#里面实现会用到一些新的方法 1.BeginExceptionBlock:异常块代码开始,相当于try,但是感觉又不太像 2.EndExcep ...
Git分布式版本控制教程
Git分布式版本控制Git 安装配置Linux&Unix平台 Debian/Ubuntu $ apt-get install git Fedora $ ) $ dnf and later) G ...
canvas快速绘制圆形、三角形、矩形、多边形
想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...
兼容Mono的下一代云环境Web开发框架ASP.NET vNext
微软在2014年5月12日的TechEd大会上宣布将会发布下一代ASP.NET框架ASP.NET vNext的预览.此次发布的ASP.NET框架与以前相比发生了根本性的变化,凸显了微软“云优先”(cl ...
Raspkate - 基于.NET的可运行于树莓派的轻量型Web服务器
最近在业余时间玩玩树莓派,刚开始的时候在树莓派里写一些基于wiringPi库的C语言程序来控制树莓派的GPIO引脚,从而控制LED发光二极管的闪烁,后来觉得,是不是可以使用HTML5+jQuery等流 ...
AutoMapper(七)
返回总目录 Null值替换如果源类型的成员链上的属性值为Null,Null值替换允许提供一个可替换的值.下面有两个类Person和PersonInfo类,都有一个属性Title(头衔),从Perso ...

JavaScript动画-模拟拖拽

JavaScript动画-模拟拖拽的更多相关文章

随机推荐

热门专题