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 相关文章推荐
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
简单实现JS计算器功能
Dec 21 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
python如何实现DES加密
2020/09/21 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
C面试题
2015/10/08 面试题
药品促销活动方案
2014/02/14 职场文书
网络技术专业推荐信
2014/02/20 职场文书
计划生育证明书写要求
2014/09/17 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
结婚纪念日感言
2015/08/01 职场文书
安全生产协议书
2016/03/22 职场文书
php去除deprecated的实例方法
2021/11/17 PHP
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle