JavaScript简单拖拽效果(1)


Posted in Javascript onMay 17, 2017

拖拽在前端开发中是很常见的功能,也是基本功之一,本文是不限制范围的拖拽也就是最简单的拖拽,鼠标按下对象,拖拽,松开停止!
1,onmousedown事件
2,onmousemove事件
3,onmouseup事件

因为在按下时拖动,所以onmousemove事件在down后才注册,up事件是用来解绑事件,消除事件!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>简单拖拽</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #div1 {
      width: 100px;
      height: 100px;
      background: orange;
      position: absolute;
    }
  </style>
</head>
<body style="height: 500000px;">
  <div id="div1"></div>

  <script type="text/javascript">
    function getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      } else {
        return getComputedStyle(obj, null)[attr];
      }
    }
    var oDiv = document.getElementById('div1');
    oDiv.onmousedown = function(ev) {
      var oEvent = ev || event;
      // var disX = oEvent.clientX - oDiv.offsetLeft;
      // var disY = oEvent.clientY - oDiv.offsetTop;

      var disX = oEvent.clientX - parseInt(getStyle(oDiv, 'left'));
      var disY = oEvent.clientY - parseInt(getStyle(oDiv, 'top'));

      document.onmousemove = function(ev) {
        var oEvent = ev || event;
        oDiv.style.left = oEvent.clientX - disX + 'px';
        oDiv.style.top = oEvent.clientY - disY + 'px';
      };
      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
javascript arguments使用示例
Dec 16 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
纯JS实现轮播图
Feb 22 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 #Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 #Javascript
Vue.js鼠标悬浮更换图片功能
May 17 #Javascript
12个非常有用的JavaScript技巧
May 17 #Javascript
Javascript中的async awai的用法
May 17 #Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 #Javascript
angular.fromJson与toJson方法用法示例
May 17 #Javascript
You might like
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php 短链接算法收集与分析
2011/12/30 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
ios中视频的最后一桢问题解决
2019/05/14 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
Vue基础配置讲解
2019/11/29 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
python脚本实现验证码识别
2018/06/07 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
学校后勤人员职责
2013/12/27 职场文书
标准化管理实施方案
2014/02/25 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
献爱心活动总结
2014/05/07 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
校长师德表现自我评价
2015/03/05 职场文书
结婚仪式主持词
2015/06/29 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书