js 弹窗拖动

已于 2022-05-26 13:02:33 修改
阅读量344 收藏 1
点赞数
文章标签： javascript css html
于 2022-05-26 13:00:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46126127/article/details/124982693
版权 
<!DOCTYPE html>
<html>

<head>
    <title>测试</title>
    <style>
        html {
            font-size: 14px;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
        }


        .dialog {
            top: 0;
            left: 0;
            position: fixed;
            display: none;
            width: 100vw;
            height: 100vh;
            z-index: 999;
        }

        .mask {
            background-color: rgba(0, 0, 0, 0.3);
            height: 100%;
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .d_container {
            background-color: #fff;
            width: 60%;
            height: 50%;
            position: absolute;
        }

        .d_header {
            background-color: #f2f4f7;
            height: 3.5rem;
            display: flex;
        }

        .drag {
            height: 100%;
            width: calc(100% - 3.5rem);
            display: flex;
            align-items: center;
            padding: 0 2rem;
            box-sizing: border-box;
            cursor: move;
          user-select: none;
        }

        .close {
            height: 100%;
            width: 3.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close:hover {
            background-color: red;
            color: #fff;
        }

        .d_content {
            height: calc(100% - 3.5rem);
            width: 100%;
        }
    </style>
    <script>
        window.onload = function () {
            drag()
        }
        function drag() {
            let list = document.querySelector('.drag')
            let box1 = document.querySelector('.drag_box')
            list.onmousedown = function (e) {//点击的位置   移动的距离   移动距离
                let boxleft = box1.getBoundingClientRect().left
                let boxtop = box1.getBoundingClientRect().top
                let x = e.x
                let y = e.y
                document.onmousemove = function (d) {
                    box1.style.left = boxleft + d.x - x + 'px'
                    box1.style.top = boxtop + d.y - y + 'px'
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                }
            }
        }
        /* 关闭弹窗 */
        function closeDialog(e) {
            e.stopPropagation();
            let dialog = document.querySelector('.dialog')
            dialog.style.display = "none"
        }
        /* 开启弹窗 */
        function openDialog() {
            let dialog = document.querySelector('.dialog')
            dialog.style.display = "block"
        }
    </script>
</head>

<body>
    <div class="container">
        <button onclick="openDialog()">打开弹窗</button>
        <div class="dialog">
            <div class="mask">
                <div class="d_container drag_box">
                    <div class="d_header">
                        <div class="drag">
                            <div class="d_h_title">
                                详情
                            </div>
                        </div>
                        <div onclick="closeDialog(event)" class="close">X</div>
                    </div>
                    <div class="d_content">
                        <table>
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

qq_46126127
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现弹出窗口的拖拽功能
weixin_46390620的博客
03-01 1095
弹出窗口的拖拽 拖拽功能运用到的有 onmousedown 事件，onmousemove 事件以及 onmouseup 事件 弹出窗口基本步骤： 1、点击点击弹出窗口按钮弹出窗口； 2、窗口弹出后，鼠标点击标题的时候我们需要获取鼠标所在位置的横纵坐标，然后获取盒子离页面的横纵方向的距离； 3、计算出鼠标相对盒子的距离； 4、当鼠标移动的时候，获取鼠标移动的距离，在用鼠标此刻的位置减去鼠标相对盒子的...
js可拖拽弹窗
喵喵喵~~~的博客
02-23 355
alertWin('审核提示','',400,200,id); function alertWin(title, msg, w, h, id) { var titleheight = "22px"; // 窗口标题高度 var bordercolor = "#666699"; //窗口的边框颜色 var titlecolor = "#FFFFFF"; // 窗口的标题颜色 var titlebgcolor = "#666699"; //..
Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题）
易小花的博客
02-22 5830
Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题） 由于页面中弹框很多，往往会挡住想要查看的内容。从而，有了自由移动拖拽弹框的需求；但在使用的过程中发现，一开始编写的drag.js文件会移出可视范围，会影响项目的整体布局；并且在拖动过程中发现，快速拖动弹框时，可能会失效或者略微延后。 1.在项目中新建drag.js文件，文件中代码如下（直接复制使用）（以下代码已解决移出可视范围和快速拖动延后问题，并为拖动时设置对应的鼠标样式） import Vue from 'vue'; //使用Vue.direc
JavaScript-自制网页内弹窗[可移动][DOM][纯HTML]
TDTX博客
10-15 1719
实现思路 - 编写弹窗样式，display默认为none，position为absolute; - 点击弹出窗口按钮，弹出的display会设置为block，即可显示弹窗； - 编写弹窗的鼠标按下、抬起、移动、区域离开事件函数 - 在移动时候，获取当前鼠标x/y与上一个鼠标x/y的差值deltaX/deltaY, 然后计算新的距离父组件的左距离、上距离， 设定该窗口的ddDiv.style.left 、addDiv.style.top即可让弹窗跟随鼠标的移动； - 在点击弹窗内“确认”、“取消”按钮
Element-UI实现el-dialog弹框拖拽功能
最新发布
觉醒法师的专栏
06-17 2216
在实际开发中，会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的，这极大方便用户的操作。在查看Element-UI中弹框（el-dialog）组件的文档说明后，发现并未实现这一功能，不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框的拖拽功能。
js拖动弹框在页面移动，不出屏幕边界
u013594477的专栏
12-08 6276
鼠标拖动弹框不出浏览器的边界
【JS功能】前端实现可拖拽弹出框功能
leo的博客
03-27 331
【JS功能】前端实现可拖拽弹出框功能
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
10-26
1. **js弹窗**：JavaScript弹窗通常是指使用JavaScript语言在网页上创建的对话框或者提示框，它不是浏览器内置的，而是通过编程实现的，可以自定义样式、内容和行为。与传统的浏览器弹出窗口（如alert、prompt、...
three.js 弹窗html页面示例
06-12
在IT行业中，JavaScript和HTML是构建网页交互性的重要技术，而`three.js`是一个非常流行的JavaScript库，专门用于在浏览器中创建和展示3D图形。本示例将探讨如何使用`three.js`来实现3D模型点击后弹出HTML页面的功能...
原生js实现自由拖拽弹窗代码demo
10-22
总结来说，实现原生JS拖拽弹窗的关键知识点包括： 1. 绝对定位和CSS布局。 2. 使用JavaScript获取DOM元素并绑定事件处理函数。 3. 事件监听和处理，如`onmousedown`、`onmousemove`和`onmouseup`。 4. 计算鼠标位置...
bootstrap实现弹窗和拖动效果
09-02
总的来说，Bootstrap的弹窗功能结合JavaScript和CSS，可以轻松实现交互式的弹出窗口，同时通过添加额外的拖动效果，可以进一步提升用户体验。在实际项目中，开发者可以根据需求自定义弹窗的内容和行为，以满足各种...
js实现弹出div任意拖拽
08-17
js实现弹出div任意拖拽
js 弹出可移动窗口 实例
07-27
弹出移动DIV窗口 弹出移动DIV 窗口弹出移动
原生js easydialog.js弹窗控件多种拖动弹出框效果代码
10-31
在给定的标题“原生js easydialog.js弹窗控件多种拖动弹出框效果代码”中，我们可以理解这是一个基于JavaScript实现的弹窗插件——easydialog.js。这个插件专注于提供可拖动的、多样的弹出框效果，增强了用户体验。 ...
js实现弹窗拖拽功能
m0_56164131的博客
11-26 1211
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; } html, body { width: 1.
JS -------------------设置弹出框位置屏幕的中间
weixin_33921089的博客
08-30 3199
2019独角兽企业重金招聘Python工程师标准>>> ...
JS弹出框实现拖拽移动和修改宽高的功能
qq_53868229的博客
06-05 916
这里写自定义目录标题拖拽移动拖拽修改宽高完整代码 拖拽移动 通过定义dom节点的onmousedown函数，可以实现对拖拽事件的处理： 创建div： const popup = document.createElement('div'); popup.style.position = 'absolute'; popup.style.top = '50px'; popup.style.left = '50px'; popup.style.zIndex = 1; popup.style.cursor = "mo
js实现广告移动窗口效果
weixin_48567214的博客
07-11 260
【代码】js实现广告移动窗口效果。
设置提示框位置随鼠标移动，并解决提示框显示不全的问题
weixin_43258184的博客
02-08 593
https://www.cnblogs.com/zhilu/p/14047105.html tooltip: { trigger: 'axis', // position: ['50%', '50%'], position: function(point, params, dom, rect, size) { var x = 0; var y = 0;
vue 指令实现弹窗拖拽和拉伸
08-30
在Vue中，可以通过自定义指令实现弹窗的拖拽和拉伸功能。 首先，对于拖拽功能，可以创建一个自定义指令`v-draggable`。在该指令的绑定元素上设置`mousedown`事件监听器，当鼠标按下时触发拖拽操作。在`mousemove`和`mouseup`事件监听器中处理鼠标移动和释放的逻辑。具体代码如下： ```javascript Vue.directive('draggable', { bind(el) { el.style.position = 'absolute'; el.addEventListener('mousedown', startDrag); function startDrag(e) { const startX = e.clientX; const startY = e.clientY; const initialX = el.offsetLeft; const initialY = el.offsetTop; document.addEventListener('mousemove', dragElement); document.addEventListener('mouseup', releaseElement); function dragElement(e) { el.style.left = `${initialX + (e.clientX - startX)}px`; el.style.top = `${initialY + (e.clientY - startY)}px`; } function releaseElement() { document.removeEventListener('mousemove', dragElement); document.removeEventListener('mouseup', releaseElement); } } } }); ``` 接下来，对于拉伸功能，可以创建一个自定义指令`v-resizable`。在该指令的绑定元素上设置`mousedown`事件监听器，当鼠标按下时触发拉伸操作。在`mousemove`和`mouseup`事件监听器中处理鼠标移动和释放的逻辑。具体代码如下： ```javascript Vue.directive('resizable', { bind(el) { el.style.position = 'absolute'; el.style.resize = 'both'; el.addEventListener('mousedown', startResize); function startResize(e) { const startX = e.clientX; const startY = e.clientY; const initialWidth = el.offsetWidth; const initialHeight = el.offsetHeight; document.addEventListener('mousemove', resizeElement); document.addEventListener('mouseup', releaseElement); function resizeElement(e) { el.style.width = `${initialWidth + (e.clientX - startX)}px`; el.style.height = `${initialHeight + (e.clientY - startY)}px`; } function releaseElement() { document.removeEventListener('mousemove', resizeElement); document.removeEventListener('mouseup', releaseElement); } } } }); ``` 最后，在需要拖拽和拉伸的弹窗组件上使用`v-draggable`和`v-resizable`指令即可实现相应功能。例如： ```html <template> <div class="modal" v-draggable v-resizable> <!-- 弹窗内容 --> </div> </template> ``` 通过上述自定义指令的方式，我们可以在Vue中实现弹窗的拖拽和拉伸功能，提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值