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 相关文章推荐
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
jquery实现submit提交表单
Feb 03 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 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
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
JS实现图片预加载无需等待
2012/12/21 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
好人好事演讲稿
2014/09/01 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
环保建议书作文300字
2015/09/14 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
赞美教师的句子
2019/09/02 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python