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 相关文章推荐
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
详解JavaScript函数
Dec 01 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
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
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python的Lambda函数用法详解
2019/09/03 Python
如何基于python操作excel并获取内容
2019/12/24 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
python实现拼接图片
2020/03/23 Python
什么是python的函数体
2020/06/19 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
用python计算文件的MD5值
2020/12/23 Python
Python爬取某平台短视频的方法
2021/02/08 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
老公给老婆的保证书
2014/04/28 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python