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的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 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读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP _construct()函数讲解
2019/02/03 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
python str与repr的区别
2013/03/23 Python
Python切片用法实例教程
2014/09/08 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python列表推导式操作解析
2019/11/26 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
毕业生找工作的自我评价
2013/10/18 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
班级德育工作实施方案
2014/02/21 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
HDFS免重启挂载新磁盘
2022/04/06 Servers
java实现面板之间切换功能
2022/06/10 Java/Android