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 面向对象编程(coolshell)
Mar 18 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python使用pymysql小技巧
2017/06/04 Python
python如何在循环引用中管理内存
2018/03/20 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python3 logging日志封装实例
2020/04/08 Python
Python如何实现邮件功能
2020/05/27 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
python SOCKET编程基础入门
2021/02/27 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
员工年终自我评价
2014/09/14 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
团委副书记工作总结
2015/08/14 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis