Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)


Posted in Javascript onJanuary 23, 2015

拖拽的原理: 其实就是鼠标与左上角的距离保持不变。我们来看下图, Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)这红点就是鼠标。

拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性。 那这个距离怎么求呢??

鼠标的位置-物体位置的差值就是那个距离 是吧。那这个斜线就是横线和竖线组成的。

Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)

我们距离看下程序怎么做。

<div id="div1">

    </div>

实际上他改的就是某个div 的left top ,那他就动起来了。 那样式中肯定要有绝对定位是吧。

<style type="text/css">
      #div1 {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
      }
    </style>

这里有几个步骤,1. 鼠标按下 2. 鼠标抬起来 3. 鼠标移动

<script type="text/javascript">
   window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event; // 浏览器兼容
     disX = oEvent.clientX - oDiv.offsetLeft; // 横向的位置就是鼠标的位置-div的位置
     disY = oEvent.clientY - oDiv.offsetTop;
    };

    oDiv.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px'; // 当前鼠标的位置-disX
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
   };
  </script>

看图说话:

Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)

var oDivLeft = oEvent.clientX - disX; 图表示 很清楚吧

Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)

mouseup 我们先不加看下现在是什么效果。。

Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)

你会发现一个很有意思的现象,我鼠标没有按也会跟着我走, 这是为什么呢???

我们来看看 mousemove: Javascript中没有人规定一定是要鼠标按下才出发是吧,不管你鼠标按不按下去,这个mousemove一直在发生,所以问题就来自于这里。当鼠标还没有按下去之前,这个时候鼠标在上面移动应该是没有反应的,是要按下去才有反应。

所以呢,这个mousemove不应该一上来就添加,而是等到鼠标按下去之后再添加mousemove,来看看修改后的代码。

顺便加上mouseup,这时他的作用就体现出来了 。作用就是oDiv.onmousemove = null; 去掉move事件,

否则当你鼠标抬起来的时候 ,物体还是会跟着你走的。 oDiv.onmouseup = null; 不留垃圾,鼠标抬起本来也就没有用了.

来看看修改后的代码:

<script type="text/javascript">
   window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event; // 浏览器兼容
     disX = oEvent.clientX - oDiv.offsetLeft; // 横向的位置就是鼠标的位置-div的位置
     disY = oEvent.clientY - oDiv.offsetTop;

     oDiv.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px'; // 当前鼠标的位置-disX
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     oDiv.onmouseup = function() {
      oDiv.onmousemove = null;
      oDiv.onmouseup = null; // 不留垃圾,鼠标抬起本来也就没有用了
     };

    };

   };
  </script>

现在我们就做了一个简单的拖拽出来,当然这还有一些小问题有待我们去解决。

但是无论如何,我们已经具备一个拖拽的雏形。 下期我们会一一解决一些bug。

Javascript 相关文章推荐
jQuery实现动画效果的实例代码
May 07 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 #Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
jQuery选择器querySelector的使用指南
Jan 23 #Javascript
jQuery中DOM操作实例分析
Jan 23 #Javascript
jquery实现点击页面计算点击次数
Jan 23 #Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 #Javascript
You might like
php实现比较全的数据库操作类
2015/06/18 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python使用asyncio包处理并发详解
2017/09/09 Python
Python微信公众号开发平台
2018/01/25 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
学习Python需要哪些工具
2020/09/04 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
土建施工员岗位职责
2014/07/16 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
公司档案管理制度
2015/08/05 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python