可视区域内拖拽

最新推荐文章于 2022-09-07 17:45:24 发布
最新推荐文章于 2022-09-07 17:45:24 发布
阅读量5.4k 收藏
点赞数
分类专栏： web前端学习 文章标签： 视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/51934034
版权

视频地址：http://www.imooc.com/learn/60

看最下面的例子

<!DOCTYPE html>
<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>慕课网-拖拽效果</title>

        <style type="text/css">
            body {
                padding: 0px;
                margin: 0px;
                font-size: 12px;
                font-family: "微软雅黑";
            }

            .link {
                text-align: right;
                line-height: 20px;
                margin-right: 40px;
                color: red;
            }

            .ui-dialog {
                width: 380px;
                height: auto;
                display: none;
                position: absolute;
                z-index: 9000;
                top: 0px;
                left: 0px;
                border: 1px solid red;
                background: #fff;
            }

            .ui-dialog a {
                text-decoration: none;
            }

            .ui-dialog-title {
                height: 48px;
                line-height: 48px;
                padding: 0px 20px;
                color: black;
                font-size: 16px;
                border-bottom: 1px solid red;
                background: #f5f5f5;
                cursor: move;
                user-select: none;
            }

            .ui-dialog-closebutton {
                width: 16px;
                height: 16px;
                display: block;
                position: absolute;
                top: 12px;
                right: 20px;
                background: url(img/close_def.png) no-repeat;
                cursor: pointer;
            }

            .ui-dialog-closebutton:hover {
                background: url(img/close_hov.png);
            }

            .ui-dialog-content {
                padding: 15px 20px;
            }

            .ui-dialog-pt15 {
                padding-top: 15px;
            }

            .ui-dialog-l40 {
                height: 40px;
                line-height: 40px;
                text-align: right;
            }

            .ui-dialog-input {
                width: 100%;
                height: 40px;
                margin: 0px;
                padding: 0px;
                border: 1px solid red;
                font-size: 16px;
                color: #c1c1c1;
                text-indent: 45px;
                outline: none;
            }

            .ui-dialog-input-username {
                background: url(img/input_username.png) no-repeat 2px;
            }

            .ui-dialog-input-password {
                background: url(img/input_password.png) no-repeat 2px;
            }

            .ui-dialog-submit {
                width: 100%;
                height: 50px;
                background: #3b7ae3;
                border: none;
                font-size: 16px;
                color: #fff;
                outline: none;
                text-decoration: none;
                display: block;
                text-align: center;
                line-height: 50px;
            }

            .ui-dialog-submit:hover {
                background: #3f81b0;
            }

            .ui-mask {
                width: 100%;
                height: 100%;
                background: black;
                position: absolute;
                top: 0px;
                height: 0px;
                z-index: 8000;
                opacity: 0.4;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var dialogInstace, onMoveStartId, mousePos = {
                    x: 0,
                    y: 0
                }; //   用于记录当前可拖拽的对象
                // var zIndex = 9000;
                //  获取元素对象  
                function g(id) {
                    return document.getElementById(id);
                }
                //  自动水平居中元素（el = Element）
                function autoCenter(el) {
                    var bodyW = document.documentElement.clientWidth;
                    var bodyH = document.documentElement.clientHeight;
                    var elW = el.offsetWidth;
                    var elH = el.offsetHeight;
                    el.style.left = (bodyW - elW) / 2 + 'px';
                    el.style.top = (bodyH - elH) / 2 + 'px';
                }
                //  自动扩展元素到全部显示区域
                function fillToBody(el) {
                    el.style.width = document.documentElement.clientWidth + 'px';
                    el.style.height = document.documentElement.clientHeight + 'px';
                }
                //  Dialog实例化的方法
                function Dialog(dragId, moveId) {
                    var instace = {};
                    instace.dragElement = g(dragId); // 允许执行 拖拽操作 的元素
                    instace.moveElement = g(moveId); // 拖拽操作时，移动的元素
                    instace.mouseOffsetLeft = 0; // 拖拽操作时，移动元素的起始 X 点
                    instace.mouseOffsetTop = 0; //  拖拽操作时，移动元素的起始 Y 点
                    instace.dragElement.addEventListener('mousedown', function(e) {
                        var e = e || window.event;
                        dialogInstace = instace;
                        instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft;
                        instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop;
                        onMoveStartId = setInterval(onMoveStart, 10);
                        return false;
                        // instace.moveElement.style.zIndex = zIndex ++;
                    })
                    return instace;
                }
                //  在页面中侦听 鼠标弹起事件
                document.onmouseup = function(e) {
                    dialogInstace = false;
                    clearInterval(onMoveStartId);
                }
                document.onmousemove = function(e) {
                    var e = window.event || e;
                    mousePos.x = e.clientX;
                    mousePos.y = e.clientY;
                    e.stopPropagation && e.stopPropagation();
                    e.cancelBubble = true;
                    e = this.originalEvent;
                    e && (e.preventDefault ? e.preventDefault() : e.returnValue = false);
                    document.body.style.MozUserSelect = 'none';
                }

                function onMoveStart() {
                    var instace = dialogInstace;
                    if(instace) {
                        var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;
                        var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight;
                        instace.moveElement.style.left = Math.min(Math.max((mousePos.x - instace.mouseOffsetLeft), 0), maxX) + "px";
                        instace.moveElement.style.top = Math.min(Math.max((mousePos.y - instace.mouseOffsetTop), 0), maxY) + "px";
                    }
                }
                //  重新调整对话框的位置和遮罩，并且展现
                function showDialog() {
                    g('dialogMove').style.display = 'block';
                    g('mask').style.display = 'block';
                    autoCenter(g('dialogMove'));
                    fillToBody(g('mask'));
                }
                //  关闭对话框
                function hideDialog() {
                    g('dialogMove').style.display = 'none';
                    g('mask').style.display = 'none';
                }
                //  侦听浏览器窗口大小变化
                window.onresize = showDialog;
                Dialog('dialogDrag', 'dialogMove');
                showDialog();
            }
        </script>
    </head>

    <body>

        <div class="link">
            <a href="javascript:showDialog();">登录</a>
        </div>
        <div class="ui-mask" id="mask" onselectstart="return false"></div>
        <!--遮罩-->

        <div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
            <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
                登录通行证
                <a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a>
            </div>
            <div class="ui-dialog-content">
                <div class="ui-dialog-l40 ui-dialog-pt15">
                    <input class="ui-dialog-input ui-dialog-input-username" type="input" value="手机/邮箱/用户名" />
                </div>
                <div class="ui-dialog-l40 ui-dialog-pt15">
                    <input class="ui-dialog-input ui-dialog-input-password" type="input" value="密码" />
                </div>
                <div class="ui-dialog-l40">
                    <a href="#">忘记密码</a>
                </div>
                <div>
                    <a class="ui-dialog-submit" href="#">登录</a>
                </div>
                <div class="ui-dialog-l40">
                    <a href="#">立即注册</a>
                </div>
            </div>
        </div>

    </body>

</html>

修改：

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            #mask {
                width: 100%;
                height: 100%;
                background: black;
                position: absolute;
                top: 0px;
                height: 0px;
                z-index: 1;
                opacity: 0.4;
            }

            #box {
                z-index: 11;
                display: none;
                position: absolute;
                width: 300px;
                height: 300px;
                background: red;
            }

            #main {
                height: 50px;
                background: blue;
                cursor: move;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var dialogInstace, onMoveStartId, mousePos = {
                    x: 0,
                    y: 0
                }; //   用于记录当前可拖拽的对象
                // var zIndex = 9000;
                //  获取元素对象  
                function g(id) {
                    return document.getElementById(id);
                }
                //  自动水平居中元素（el = Element）
                function autoCenter(el) {
                    var bodyW = document.documentElement.clientWidth;
                    var bodyH = document.documentElement.clientHeight;
                    var elW = el.offsetWidth;
                    var elH = el.offsetHeight;
                    el.style.left = (bodyW - elW) / 2 + 'px';
                    el.style.top = (bodyH - elH) / 2 + 'px';
                }
                //  自动扩展元素到全部显示区域
                function fillToBody(el) {
                    el.style.width = document.documentElement.clientWidth + 'px';
                    el.style.height = document.documentElement.clientHeight + 'px';
                }
                //  Dialog实例化的方法
                function Dialog(dragId, moveId) {
                    var instace = {};
                    instace.dragElement = g(dragId); // 允许执行 拖拽操作 的元素
                    instace.moveElement = g(moveId); // 拖拽操作时，移动的元素
                    instace.mouseOffsetLeft = 0; // 拖拽操作时，移动元素的起始 X 点
                    instace.mouseOffsetTop = 0; //  拖拽操作时，移动元素的起始 Y 点
                    instace.dragElement.addEventListener('mousedown', function(e) {
                        var e = e || window.event;
                        dialogInstace = instace;
                        instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft;
                        instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop;
                        onMoveStartId = setInterval(onMoveStart, 10);
                        return false;
                        // instace.moveElement.style.zIndex = zIndex ++;
                    })
                    return instace;
                }
                //  在页面中侦听 鼠标弹起事件
                document.onmouseup = function(e) {
                    dialogInstace = false;
                    clearInterval(onMoveStartId);
                }
                document.onmousemove = function(e) {
                    var e = window.event || e;
                    mousePos.x = e.clientX;
                    mousePos.y = e.clientY;
                    e.stopPropagation && e.stopPropagation();
                    e.cancelBubble = true;
                    e = this.originalEvent;
                    e && (e.preventDefault ? e.preventDefault() : e.returnValue = false);
                    document.body.style.MozUserSelect = 'none';
                }

                function onMoveStart() {
                    var instace = dialogInstace;
                    if(instace) {
                        var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;
                        var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight;
                        instace.moveElement.style.left = Math.min(Math.max((mousePos.x - instace.mouseOffsetLeft), 0), maxX) + "px";
                        instace.moveElement.style.top = Math.min(Math.max((mousePos.y - instace.mouseOffsetTop), 0), maxY) + "px";
                    }
                }
                //  关闭对话框
                function hideDialog() {
                    g('dialogMove').style.display = 'none';
                    g('mask').style.display = 'none';
                }

                //  重新调整对话框的位置和遮罩，并且展现
                function showDialog() {
                    g('box').style.display = 'block';
                    g('mask').style.display = 'block';
                    autoCenter(g('box'));
                    fillToBody(g('mask'));
                }
                //  侦听浏览器窗口大小变化
                window.onresize = showDialog;
                Dialog('main', 'box');
                showDialog();
            }
        </script>
    </head>

    <body>
        <div id="mask"></div>
        <!--遮罩 -->
        <div id="box">
            <div id="main">
            </div>
        </div>
    </body>

</html>
最骚的就是你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
拖拽至目标区域
高山景行，一尘不染
02-05 824
效果：拖拽至目标区域进行下面的操作，例如删除，盖章等 代码： <template> <div class="main"> <img src="../assets/logo.png" draggable="true" @click="showBigPic()" v-on:dragstart="face...
可视区域内鼠标拖拽框
一个前端小菜鸟的博客
03-11 1352
要想在通过鼠标来拖拽div，就要在鼠标点下的时刻获取光标与div的距离。然后在光标移动时设置div的left值为光标的left减去那个距离，设置div的top值为光标的top减去那个距离。但是div的left与top是相对于body（即整个页面），而光标的left与top却是相对于可视区域而言的。在没有滚动条时，两者在参考系是一样的；但是在滚动条出现以后两者的参考系就不同了。所以，有两种解决办法，
【vue.draggable】判断被拖拽元素是否在目标区域内并阻止拖拽
EStringDoggi的博客
09-07 3493
被拖拽区域（右侧）有@add事件（也就是draggable标签里面），可以通过判断事件第一个参数event.originalEvent.cancelable是否为false，如果为false，配合event.newIndex去删除目标分组的对应元素。的拖拽特性，如果元素从左边拖到右边了，但是又移出了右侧区域（也许是用户反悔了），我希望被拖拽元素不要插入到右侧。通过比对我发现了event.originalEvent.cancelable这个属性在是否目标区域放置时有区别。插件默认操作是继续添加到模板区域的。
jQuery 拖动层(在可视区域范围内)
10-28
获取层元素，在浏览器可视区域的最左、最边，最上、最下的值。并且在拖动层的过程中，把当前层的坐标值，去和这几个值，做比较，如果超过这些值。那么就不能再拖动这个方向，即把值设为最小或最大
vue实现拖拽的简单案例 不超出可视区域
12-10
在这个简单的案例中，我们将探讨如何创建一个可以自由拖动且不会超出可视区域的元素。首先，我们需要理解几个基本概念： 1. 鼠标坐标：`pageX` 和 `pageY` 返回鼠标相对于整个HTML文档左上角的坐标，不受滚动条影响...
自定义划分区域获取区域内坐标点-百度地图
12-04
总的来说，通过百度地图API，开发者可以轻松地实现自定义区域的划分，统计区域内坐标点，并利用点聚合技术优化地图的展示。这个过程涉及到了前端交互、几何运算、空间数据处理等多个方面的知识，对提升GIS应用的用户...
可视区拖动div效果
06-01
这种效果使得用户可以通过鼠标拖动一个div元素，使其在浏览器的可视区域内移动，增强了用户的交互体验，常见于地图应用、窗口式布局或者自定义滚动条等场景。 首先，JavaScript是实现这一功能的基础，它提供了对DOM...
鼠标拖拽窗口效果（不允许拖出屏幕的可视区域）
皮卡丘の开发之路
08-25 7042
鼠标拖拽窗口效果（不允许拖出屏幕的可视区域）
使用 vue 实现拖拽的简单案例，不会超出可视区域
热门推荐
weixin_39090097的博客
09-04 2万+
实现拖拽之前，先了解几个小常识： 这两种获取鼠标坐标的方法，区别在于基于的对象不同： pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变； clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变； clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离 client...
antd modal 拖动_Ant-design Modal实现可以拖动的效果
weixin_28903813的博客
01-17 1279
最近项目组在开发的时候提出了一个需求，需要让 ant-design Modal实现能够拖动的功能，研究了一番，基于 and-design Modal自己封装了一个antd-draggable-modal组件。特性：支持弹出窗居中打开支持拖拽 title bar 实现拖拽支持多层弹窗拖拽实现原理要实现 Modal 的拖拽，首先要弄清楚 Modal 的位置跟什么有关系，打开浏览器，通过F12 调试窗口...
Easy-ui dialog弹框拖动超出body后无法关闭
u011014001的博客
07-13 739
easy-ui的dialog可以随意拖动，有时会将dialog上方的拖动条超出body的显示范围，造成无法关闭dialog的问题。 解决方法是在页面的data-options或在js中绑定中onMove函数，当判断到拖动的距离小于0 时，即移动到一个初始位置。 1.data-options="onMove:function(left,top){if(left 2.('#pictureDi
elementui中el-dialog拖动不可超出可视区域
最新发布
05-30
要实现el-dialog拖动不可超出可视区域，可以通过以下步骤实现： 1. 使用el-dialog的drag指令，将dialog设置为可拖动。 2. 监听dialog的drag事件，获取dialog的位置信息。 3. 获取当前可视区域的大小和位置信息。 4. 判断dialog是否超出可视区域，如果超出则将dialog的位置设置为可视区域的边界。 下面是示例代码： ```html <template> <el-dialog v-model="dialogVisible" :drag="dragDialog"> <p>这是一个可以拖动的Dialog</p> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, dragDialog: { containment: 'document', // 指定拖动范围为整个文档 }, }; }, mounted() { // 监听dialog的drag事件 this.$refs.dialog.$el.addEventListener('drag', this.handleDialogDrag); }, methods: { handleDialogDrag(event) { // 获取dialog的位置信息 const dialogRect = this.$refs.dialog.$el.getBoundingClientRect(); const dialogLeft = dialogRect.left; const dialogTop = dialogRect.top; // 获取当前可视区域的大小和位置信息 const clientWidth = document.documentElement.clientWidth; const clientHeight = document.documentElement.clientHeight; const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // 判断dialog是否超出可视区域 let left = dialogLeft; let top = dialogTop; if (dialogLeft < scrollLeft) { left = scrollLeft; } else if (dialogLeft + dialogRect.width > scrollLeft + clientWidth) { left = scrollLeft + clientWidth - dialogRect.width; } if (dialogTop < scrollTop) { top = scrollTop; } else if (dialogTop + dialogRect.height > scrollTop + clientHeight) { top = scrollTop + clientHeight - dialogRect.height; } // 将dialog的位置设置为可视区域的边界 this.$refs.dialog.$el.style.left = `${left}px`; this.$refs.dialog.$el.style.top = `${top}px`; }, }, }; </script> ``` 在上面的代码中，我们通过设置drag指令将dialog设置为可拖动。然后监听dialog的drag事件，在事件处理函数中获取dialog的位置信息和当前可视区域的大小和位置信息，判断dialog是否超出可视区域，如果超出则将dialog的位置设置为可视区域的边界。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值