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 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
python清空命令行方式
2020/01/13 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
学期自我鉴定
2013/11/04 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
培训讲师岗位职责
2014/04/13 职场文书
吨的认识教学反思
2014/04/27 职场文书
学校课外活动总结
2014/05/08 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
继承公证书格式
2015/01/26 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
2015年财务经理工作总结
2015/05/13 职场文书