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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
文本框文本自动补全效果示例分享
2014/01/19 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
幼儿园秋游感想
2014/03/12 职场文书
给校长的建议书300字
2014/05/16 职场文书
学习型党组织心得体会
2014/09/12 职场文书
实习介绍信范文
2015/05/05 职场文书
让子弹飞观后感
2015/06/11 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android