JavaScript实现拖拽功能


Posted in Javascript onFebruary 11, 2020

本文实例为大家分享了JavaScript实现拖拽功能的具体代码,供大家参考,具体内容如下

盒子拖拽—运用到的有onmousedown事件,onmousemove事件以及onmouseup事件

1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标,然后获取盒子的离页面的横纵方向的距离
2、计算出鼠标相对盒子的距离
3、当鼠标移动的时候,获取鼠标移动的距离,在永鼠标此刻的位置减去鼠标相对盒子的距离,获得的是盒子此刻的坐标位置
4、将这个位置赋值给盒子
5、鼠标抬起,清除鼠标移动事件;

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>鼠标拖拽</title>
 <style>
  .box{
   background-color: pink;
   width:200px;
   height:200px;
   border-radius: 50%;
   position: absolute;
   top:20px;
   left:100px;
  }
 </style>
</head>
<body>
 <div class="box">

 </div>
 <script>
  window.onload = function(){
   var box = document.getElementsByClassName('box')[0];
   function drag (ele){
    ele.onmousedown = function(e){
     var e = e || window.event; 
     //此处是为了兼容IE,因为IE中事件对象是作为全局对象( window.event )存在的;
     var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
     var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
     //获取鼠标相对盒子的位置;
     var boxX = pageX - box.offsetLeft;
     var boxY = pageY - box.offsetTop;
     document.onmousemove = function(e){
      var e = e || window.event;
      var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
      var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
      //将鼠标当前的坐标值减去鼠标相对盒子的位置,得到盒子当时的位置并将其赋值给盒子,实现移动效果
      box.style.left = pageX - boxX +'px';
      box.style.top = pageY - boxY + 'px';
     }
    };
    document.onmouseup = function () {
     //清除盒子的移动事件;
     document.onmousemove = null;
    };
   } ;
   drag(box)
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
详解vue v-model
Aug 31 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 #Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 #Javascript
原生js实现点击轮播切换图片
Feb 11 #Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 #Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 #Javascript
JS+DIV实现拖动效果
Feb 11 #Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 #Javascript
You might like
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
深入apache host的配置详解
2013/06/09 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
使用PHP开发留言板功能
2019/11/19 PHP
利用js对象弹出一个层
2008/03/26 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
理解Python垃圾回收机制
2016/02/12 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Python Flask框架扩展操作示例
2019/05/03 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
英文版区域经理求职信
2013/10/23 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
2016高考寄语集锦
2015/12/04 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书