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 表单取值赋值的一些基本操作
Oct 11 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python追加元素到列表的方法
2015/07/28 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
python reverse反转部分数组的实例
2018/12/13 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
物流毕业生个人的自我评价
2014/02/13 职场文书
大学生应聘求职信
2014/05/26 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
工作证明书
2015/06/15 职场文书
致运动员加油稿
2015/07/21 职场文书
《检阅》教学反思
2016/02/22 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript