js实现限定区域范围拖拉拽效果


Posted in Javascript onNovember 20, 2020

本文实例为大家分享了js实现限定区域范围拖拉拽的具体代码,供大家参考,具体内容如下

需要在范围内拖拉拽,之前看来许多资料觉得都不是特别满足要求,今天自己写了一个,通过监听鼠标按下、鼠标抬起、鼠标移动事件来控制

代码如下

<!DOCTYPE html>

<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>

   #drag {

    background: aqua;
    width: 200px;
    height: 200px;
    position: absolute;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;

   }

   #parent {
    position: relative;
    background: #cde4dc;
    height: 80vh;
    overflow: hidden;

   }

  </style>
 </head>

<body>
  <section id="parent">
   <div id="drag"><div>这是一个测试</div></div>
  </section>
  <script type="text/javascript">

   //自执行函数,需要拖拽的元素需要设置position:absolute,父元素position:relative
   //有传父亲节点、若无则默认body为父节点

   ((parent, children, mouseType) => {

    if (!children) return;
    let childrenDiv = document.querySelector(children);
    childrenDiv.style.position = 'absolute';
    let parentDiv = parent

     ? document.querySelector(parent)
     : document.querySelector('body');

    let isDown = false;

    let x,
     y,
     l,
     t = 0;

    childrenDiv.onmousedown = function (e) {

     x = e.clientX;
     y = e.clientY;

     // 获取左部和底部的偏移量

     l = childrenDiv.offsetLeft;
     t = childrenDiv.offsetTop;
     isDown = true;
     childrenDiv.style.cursor = mouseType || 'move';

    };

    // 鼠标移动

    window.onmousemove = function (e) {

     if (!isDown) {

      return;

     }

     //获取移动后的x和y坐标

     let nx = e.clientX;
     let ny = e.clientY;

     //获取父元素的宽高

     let parentWidth = parentDiv.clientWidth;
     let parentHeight = parentDiv.clientHeight;

     //获取子元素的宽高

     let childrenWidth = childrenDiv.clientWidth;
     let childrenHight = childrenDiv.clientHeight;

     // 计算移动后的左偏移量和顶部偏移量

     let nLeft = nx - (x - l);
     let nTop = ny - (y - t);
     let nRight = nLeft + childrenWidth;
     let nBottom = nTop + childrenHight;
     nLeft = nLeft <= 0 ? 0 : nLeft; //判断左边距离是否越界
     nTop = nTop <= 0 ? 0 : nTop; //判断上边距离是否越界
     //判断右边距离大于父元素宽度

     if (nRight >= parentWidth) {

      nLeft = parentWidth - childrenHight;

     }

     // 判断下边界是否越界

     if (nBottom >= parentHeight) nTop = parentHeight - childrenHight;
     childrenDiv.style.left = nLeft + 'px';
     childrenDiv.style.top = nTop + 'px';

    };

    // 鼠标抬起事件
    document.onmouseup = function (e) {
     //鼠标抬起
     isDown = false;

     childrenDiv.style.cursor = 'default';

    };

   })('#parent', '#drag', 'move');

  </script>
 </body>
</html>

js实现限定区域范围拖拉拽效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 #Javascript
JavaScript 异步时序问题
Nov 20 #Javascript
JavaScript实现音乐导航效果
Nov 19 #Javascript
JavaScript实现无限轮播效果
Nov 19 #Javascript
微信小程序实现分页加载效果
Nov 19 #Javascript
You might like
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
Python生成随机数组的方法小结
2017/04/15 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python3爬取各类天气信息
2018/02/24 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
班主任工作年限证明
2014/01/12 职场文书
2013年军训通讯稿
2014/02/05 职场文书
考试保密承诺书
2014/08/30 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
停车位租赁协议书
2014/09/24 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
检讨书范文500字
2015/01/28 职场文书
超市采购员岗位职责
2015/04/07 职场文书
培训通知
2015/04/17 职场文书
TypeScript 内置高级类型编程示例
2022/09/23 Javascript