js实现限定范围拖拽的示例


Posted in Javascript onOctober 26, 2020

限定范围拖拽

目录

  • 代码实例
  • 与简易拖拽的差异
  • 下载源码链接 

代码实例

* {
 padding: 0;
 margin: 0;
}
#box1 {
 width: 500px;
 height: 500px;
 background: #999;
 position: relative;
 left: 100px;
 top: 100px;
}
#box {
 width: 100px;
 height: 100px;
 background: #334;
 position: absolute;
 cursor: move;
}

<div id="box1">
<div id="box"></div>
</div>

(function () {
 var dragging = false
 var boxX, boxY, mouseX, mouseY, offsetX, offsetY
 var box = document.getElementById('box')
 var box1 = document.getElementById('box1')

 // 鼠标按下的动作
 box.onmousedown = down
 // 鼠标的移动动作
 document.onmousemove = move
 // 释放鼠标的动作
 document.onmouseup = up

 // 鼠标按下后的函数,e为事件对象
 function down(e) {
  dragging = true

  // 获取元素所在的坐标
  boxX = box.offsetLeft
  boxY = box.offsetTop

  // 获取鼠标所在的坐标
  mouseX = parseInt(getMouseXY(e).x)
  mouseY = parseInt(getMouseXY(e).y)

  // 鼠标相对元素左和上边缘的坐标
  offsetX = mouseX - boxX
  offsetY = mouseY - boxY
 }

 // 鼠标移动调用的函数
 function move(e){
  if (dragging) {
   // 获取移动后的元素的坐标
   var x = getMouseXY(e).x - offsetX
   var y = getMouseXY(e).y - offsetY

   // 计算可移动位置的大小, 保证元素不会超过可移动范围
   // 此处就是父元素的宽度减去子元素宽度
   var width = box1.clientWidth - box.offsetWidth
   var height = box1.clientHeight - box.offsetHeight

   // min方法保证不会超过右边界,max保证不会超过左边界
   x = Math.min(Math.max(0, x), width)
   y = Math.min(Math.max(0, y), height)

   // 给元素及时定位
   box.style.left = x + 'px'
   box.style.top = y + 'px'
  }
 }

 // 释放鼠标的函数
 function up(e){
  dragging = false
 }

 // 函数用于获取鼠标的位置
 function getMouseXY(e){
  var x = 0, y = 0
  e = e || window.event

  if (e.pageX) {
   x = e.pageX
   y = e.pageY
  } else {
   x = e.clientX + document.body.scrollLeft - document.body.clientLeft
   y = e.clientY + document.body.scrollTop - document.body.clientTop
  }
  return {
   x: x,
   y: y
  }
 }
})()

与简易拖拽的差异

可移动位置的改变

// 此处就是父元素的宽度减去子元素宽度
var width = box1.clientWidth - box.offsetWidth
var height = box1.clientHeight - box.offsetHeight

下载源码链接

星辉的Github

以上就是js实现限定范围拖拽的示例的详细内容,更多关于js实现限定范围拖拽的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
分析JavaScript数组操作难点
Dec 18 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
js实现磁性吸附的示例
Oct 26 #Javascript
如何构建一个Vue插件并生成npm包
Oct 26 #Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 #Javascript
vue实现前端列表多条件筛选
Oct 26 #Javascript
vue实现单一筛选、删除筛选条件
Oct 26 #Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 #Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 #Javascript
You might like
解析php中curl_multi的应用
2013/07/17 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python中生成Epoch的方法
2017/04/26 Python
使用python实现BLAST
2018/02/12 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
sort命令的作用和用法
2013/08/25 面试题
数控机械专业个人的自我评价
2014/01/02 职场文书
校园环保标语
2014/06/13 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
开天辟地观后感
2015/06/09 职场文书
学籍证明模板
2015/06/18 职场文书
党员证明信
2015/06/19 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
使用python创建股票的时间序列可视化分析
2022/03/03 Python