JavaScript实现拖拽效果


Posted in Javascript onMarch 16, 2020

要实现JavaScript的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标

获取事件对象 var e = e || window.event;

根据需求需要用到的拖拽效果的坐标

clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)

clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离)

offsetX:鼠标点击位置相对于触发事件对象的水平距离

offsetY:鼠标点击位置相对于触发事件对象的垂直距离

pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加 上水平滚动条的距离

pageY:鼠标点击位置相对于网页左上角的垂直平偏移量,也就是clientY加上垂直滚动条的距离

offsetLeft:如果父元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离

offsetTop:如果父元素中没有定位元素,那么就返回相对于body左边缘距离

获取元素自身大小:offsetWidth和offsetHeight / clientWidth和clientHeight

offsetWidth和clientWidth的区别:就是offsetWidth包含边框,clientWidth不包含边框

实现拖拽需要用到:clientWidth、clientHeight、clientX、clientY、offsetLeft、offsetTop

首先搭建好html结构和css样式

<div class="wrap">
 <div class="cover">

 </div>
</div>
* {
  margin: 0;
  padding: 0;
 }
 
 .wrap {
  width: 500px;
  height: 500px;
  border: 1px solid deeppink;
  position: relative;
  margin: 50px auto;
 }
 
 .cover {
  width: 150px;
  height: 150px;
  background: rgba(200, 7, 99, 0.5);
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
 }

注意:需要给大盒子和小盒子进行定位:子绝父相

接下来就JavaScript代码

<script>
 var wrap = document.querySelector(".wrap");
 var cover = document.querySelector(".cover");
 wrap.onmouseover = function() {
 cover.style.display = "block";
 wrap.onmousemove = function(e) {
  var e = e || window.event;
  var x1 = e.clientX;
  var y1 = e.clientY;
//这里获取到的e.clientX和e.clientY,可以看情况和需求改为e.pageX和e.pageY  
  var halfWidth = cover.clientWidth / 2;
  var halfHeight = cover.clientHeight / 2;
  var wrapLeft = wrap.offsetLeft;
  var wrapTop = wrap.offsetTop;
  var l = x1 - wrapLeft - halfWidth;
  var t = y1 - wrapTop - halfHeight;

  if (l <= 0) {
  l = 0
  }
  if (l >= wrap.clientWidth - cover.clientWidth) {
  l = wrap.clientWidth - cover.clientWidth
  }
  if (t <= 0) {
  t = 0
  }
  if (t >= wrap.clientHeight - cover.clientHeight) {
  t = wrap.clientHeight - cover.clientHeight
  }
  cover.style.left = l + "px";
  cover.style.top = t + "px"
 }
 }
 wrap.onmouseout = function() {
 cover.style.display = "none";
 }
</script>
var halfWidth = cover.clientWidth / 2;
var halfHeight = cover.clientHeight / 2;
var wrapLeft = wrap.offsetLeft;
var wrapTop = wrap.offsetTop;
var l = x1 - wrapLeft - halfWidth;
var t = y1 - wrapTop - halfHeight;
//限制范围
  if (l <= 0) {
    l = 0
   }
   if (l >= wrap.clientWidth - cover.clientWidth) {
    l = wrap.clientWidth - cover.clientWidth
   }
   if (t <= 0) {
    t = 0
   }
   if (t >= wrap.clientHeight - cover.clientHeight) {
    t = wrap.clientHeight - cover.clientHeight
   }

注意:这里要限制小盒子在大盒子之间移动的范围,左上角的限制,当小盒子超出范围时,将0赋值给l和t。右下角小盒子移动的范围在大盒子宽度减去小盒子的宽度。
其中为了使鼠标一直处于小盒子(cover)的最中间,需要减去小盒子宽度的一半。
再减去大盒子距离页面左边的边距和上边的边距就可以得到坐标

只要鼠标移入大盒子中,就能直接拖拽小盒子,并且鼠标一直处于小盒子的最中间。这样便完成了简单的拖拽效果。

JavaScript实现拖拽效果

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

Javascript 相关文章推荐
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
js实现点赞效果
Mar 16 #Javascript
Javascript Web Worker使用过程解析
Mar 16 #Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 #Javascript
JS手写一个自定义Promise操作示例
Mar 16 #Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 #Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 #Javascript
JS函数本身的作用域实例分析
Mar 16 #Javascript
You might like
从刷票了解获得客户端IP的方法
2015/09/21 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP实现的日历功能示例
2018/09/01 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python中ConfigParse模块的用法
2014/09/29 Python
Python中的推导式使用详解
2015/06/03 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
学生个人的自我评价分享
2013/11/05 职场文书
采购员的工作职责
2013/12/26 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
体育比赛口号
2014/06/09 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL