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

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • HTML5 js实现拖拉上传文件功能

    在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围内

  • 拖拉表格的JS函数

    JS:  复制代码 代码如下: /* @parem object the tbody's object @parem object tr's object (must be null) @parem string the className of onmousedown @parem string the className of onmouseout */ function order(tt,old,classover,classout) { var sf = arguments.callee

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

  • JavaScript实现选择框按比例拖拉缩放的方法

    JavaScript实现选择框按比例拖拉缩放的方法

    本文实例讲述了JavaScript实现选择框按比例拖拉缩放的方法.分享给大家供大家参考.具体如下: 这里通过javascript实现可以像PS一样拉出一个选择框的效果.里面的很多方法都是我们值得学习的. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

  • JS拖拽的进一步练习，移动与拉伸实现代码

    直接在本地是支持IE6的,有个问题就是,鼠标点击的时候光标会变为选择文字的光标,不知道应该怎么处理这个问题呢? 在此记录一下代码: 简单拖拽扩展 *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; } .controlBox{ width:200px; height:200p

  • js实现拉伸拖动iframe的具体代码

    左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法:鼠标指到2个iframe中间,可以水平拖,纵向拖(控制高度)缺点:CSDN页面放开鼠标后才改大小,不占CPU资源. 这个是实时改大小,所以速度太慢,希望有人来改改.我是不想弄了,反正又没用什么特别的技术.提示:拖动的秘密就在filter:alpha(opacity=0)这一句 复制代码 代码如下: <html><script language="javas

  • js实现砖头在页面拖拉效果

    js实现砖头在页面拖拉效果

    用js实现一个砖头在页面,但鼠标点击拖动时,砖头在页面上形成拖拉效果: 刚开始时: 鼠标点击拖动后: 实现代码: <html> <head> <meta charset="utf-8"> <style type="text/css"> *{ margin:0px; padding:0px; } #zhuantou{ width:120px; height:60px; background-image:url(1.jpg

  • JavaScript 拖拉缩放效果

    这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程序的原型也是在做图片切割效果的时候做出来的.但这个效果的参考少的多,基本上靠自己摸索,走了不少弯路,现在总算把自己想要的效果做出来了,程序跟上一个版本比较也已经"面目全非",还是觉得有很多需要改进的地方,就像永远没有最完美的土耳其地毯. 这里也有一个简化版的SimpleResize,方便学习. 在线测试 http://img.jb51.net/online/R

  • Sortable.js拖拽排序使用方法解析

    Sortable.js拖拽排序使用方法解析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上     ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上     ondragover 事件:拖拽元素在目

  • js实现拖拽效果

    首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20

随机推荐