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读取cookie函数代码
Oct 16 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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中for循环语句的几种变型
2007/03/16 PHP
php 删除记录实现代码
2009/03/12 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
php 文件上传类代码
2011/08/06 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
C#面试问题
2016/07/29 面试题
劳动纠纷调解协议书格式
2014/11/30 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
党校学习个人总结
2015/02/15 职场文书
好员工观后感
2015/06/17 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书