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 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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入门速成教程
2007/03/19 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python流程控制语句的深入讲解
2020/06/15 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
python利用线程实现多任务
2020/09/18 Python
python 用struct模块解决黏包问题
2020/11/07 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
2015年护士节慰问信
2015/03/23 职场文书
2015年推普周活动总结
2015/03/27 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
员工辞退通知书
2015/04/17 职场文书
投诉信范文
2015/07/02 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Django migrate报错的解决方案
2021/05/20 Python
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python