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.extend 函数详解
Feb 03 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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
日本十大惊悚动漫
2020/03/04 日漫
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php常用的url处理函数总结
2014/11/19 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
struct与class的区别
2014/02/03 面试题
介绍一下Linux中的链接
2016/05/28 面试题
会计学生自我鉴定
2014/02/06 职场文书
体育课课后反思
2014/04/24 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
委托公证书格式
2015/01/26 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL