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 DOM 学习第三章 内容表格
Feb 19 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
JS setTimeout与setInterval的区别
Apr 20 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
ADODB的数据库封包程序库
2006/12/31 PHP
smarty简单入门实例
2014/11/28 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
防灾减灾活动总结
2014/08/30 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
基于tensorflow权重文件的解读
2021/05/26 Python