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 相关文章推荐
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
js验证上传图片的方法
May 12 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
vue编译打包本地查看index文件的方法
Feb 23 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php实现倒计时效果
2015/12/19 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
php面向对象重点知识分享
2019/09/27 PHP
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
车间操作工岗位职责
2013/12/19 职场文书
销售行政专员职责
2014/01/03 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
有关打架的检讨书
2014/01/25 职场文书
学生会干部自荐信
2014/02/04 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
培训师岗位职责
2015/02/14 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS