JS弹出框实现拖拽移动和修改宽高的功能

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量917 收藏
点赞数
文章标签： javascript 开发语言 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53868229/article/details/131052088
版权

这里写自定义目录标题

拖拽移动

通过定义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 = "move";
popup.style.width = '1300px';
popup.style.paddingTop = '30px';
popup.style.height = '420px';
popup.style.backgroundColor = 'white';
popup.style.boxSizing = 'border-box';
popup.style.borderRadius = '5px';
popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';

添加事件处理：

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

dragElement(popup);

拖拽修改宽高

创建一个按钮，添加该按钮的onmousedown函数，可以实现对拖拽事件的处理：

const resizeButton = document.createElement('button');
resizeButton.innerHTML = '↘';
resizeButton.style.position = 'absolute';
resizeButton.style.right = '0';
resizeButton.style.bottom = '0';
resizeButton.style.width = '20px';
resizeButton.style.height = '20px';
resizeButton.style.backgroundColor = 'white';
resizeButton.style.color = 'black';
resizeButton.style.fontSize = '16px';
resizeButton.style.border = '1px solid black';
// resizeButton.style.borderRadius = '50%';
resizeButton.style.boxShadow = '1px 1px 5px rgba(0, 0, 0, 0.2)';
resizeButton.style.cursor = 'nwse-resize';
popup.appendChild(resizeButton);

添加onmousedown的事件处理：

function resizeElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  resizeButton.onmousedown = resizeMouseDown;

  function resizeMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    e.stopPropagation();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeResizeElement;
    document.onmousemove = elementResize;
  }

  function elementResize(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = e.clientX - pos3;
    pos2 = e.clientY - pos4;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.width = (elmnt.offsetWidth + pos1) + "px";
    elmnt.style.height = (elmnt.offsetHeight + pos2) + "px";
  }

  function closeResizeElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

resizeElement(popup);

完整代码

以下是一个使用js实现的关于弹出框实现拖拽移动和修改宽高的代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

const popupContainer = document.createElement('div');
popupContainer.style.display = 'none';
popupContainer.style.position = 'fixed';
popupContainer.style.left = '0';
popupContainer.style.top = '0';
popupContainer.style.width = '100%';
popupContainer.style.height = '100%';
popupContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
popupContainer.style.zIndex = '1000';

const popup = document.createElement('div');
popup.style.position = 'absolute';
popup.style.top = '50px';
popup.style.left = '50px';
popup.style.zIndex = 1;
popup.style.cursor = "move";
popup.style.width = '1300px';
popup.style.paddingTop = '30px';
popup.style.height = '420px';
popup.style.backgroundColor = 'white';
popup.style.boxSizing = 'border-box';
popup.style.borderRadius = '5px';
popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';

const iframe = document.createElement('iframe');
iframe.src = '';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = '0';

const closeButton = document.createElement('button');
closeButton.innerHTML = 'X';
closeButton.style.position = 'absolute';
closeButton.style.right = '10px';
closeButton.style.top = '5px';
closeButton.style.zIndex = '10';
closeButton.addEventListener('click', function () {
  document.body.removeChild(popupContainer);
});

popup.appendChild(closeButton);

const resizeButton = document.createElement('button');
resizeButton.innerHTML = '↘';
resizeButton.style.position = 'absolute';
resizeButton.style.right = '0';
resizeButton.style.bottom = '0';
resizeButton.style.width = '20px';
resizeButton.style.height = '20px';
resizeButton.style.backgroundColor = 'white';
resizeButton.style.color = 'black';
resizeButton.style.fontSize = '16px';
resizeButton.style.border = '1px solid black';
// resizeButton.style.borderRadius = '50%';
resizeButton.style.boxShadow = '1px 1px 5px rgba(0, 0, 0, 0.2)';
resizeButton.style.cursor = 'nwse-resize';
popup.appendChild(resizeButton);
popup.appendChild(iframe);
popupContainer.appendChild(popup);
document.body.appendChild(popupContainer);

popupContainer.style.display = 'block';

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

dragElement(popup);

function resizeElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  resizeButton.onmousedown = resizeMouseDown;

  function resizeMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    e.stopPropagation();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeResizeElement;
    document.onmousemove = elementResize;
  }

  function elementResize(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = e.clientX - pos3;
    pos2 = e.clientY - pos4;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.width = (elmnt.offsetWidth + pos1) + "px";
    elmnt.style.height = (elmnt.offsetHeight + pos2) + "px";
  }

  function closeResizeElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

resizeElement(popup);

</script>

</html>

直接复制代码，新建一个html文件即可运行查看。

疯狂的大橘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js实现弹出窗口的拖拽功能
weixin_46390620的博客
03-01 1095
弹出窗口的拖拽 拖拽功能运用到的有 onmousedown 事件，onmousemove 事件以及 onmouseup 事件 弹出窗口基本步骤： 1、点击点击弹出窗口按钮弹出窗口； 2、窗口弹出后，鼠标点击标题的时候我们需要获取鼠标所在位置的横纵坐标，然后获取盒子离页面的横纵方向的距离； 3、计算出鼠标相对盒子的距离； 4、当鼠标移动的时候，获取鼠标移动的距离，在用鼠标此刻的位置减去鼠标相对盒子的...
JS+CSS实现可拖动的弹出提示框
10-24
本实例将通过JavaScript（JS）和层叠样式表（CSS）技术来实现这一功能。以下是实现这个功能的具体步骤和相关知识点： 首先，我们来看HTML结构。这里创建了一个ID为`massage_box`的`div`元素作为提示框，以及一个...
css 弹出框可移动,JS+CSS实现可拖动的弹出提示框
weixin_39664774的博客
08-04 863
本文实例讲述了JS+CSS实现可拖动的弹出提示框。分享给大家供大家参考。具体实现方法如下：JS+CSS打造的可拖动的弹出提示框a{ color:#000; font-size:12px;text-decoration:none}a:hover{ color:#900; text-decoration:underline}body{background:;filter:progid:DXImageT...
Web前端最全撸一个vue项目实现拖拽功能_vue dragover，web前端开发如何提高页面性能优化
2401_84123150的博客
05-17 630
原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。dataTransfer 对象允许我们在开始拖动元素时设置数据，并在将元素放在拖放区中时访问相同的数据。首先，我们必须设置数据。如你所见例子中有两个列表，我们可以在它们之间顺畅地拖放项目。API 中有八个拖放事件可以用在我们程序中。
vue el-dialog弹出框自定义指令实现拖拽改变位置-宽度-高度
路虽远行则将至，事虽难做则必成。
10-20 3486
在实际开发中我们经常使用el-dialog弹出框做表单，一般情况都是居中。遮挡到了一部分数据当我们想要查看弹出框下面的数据时，就只能先把弹出框关闭，查看完数据之后在打开弹框我们通过动态样式，和鼠标事件就可以实现。但自己写的在适配性和全面性上还是有所欠缺的这种我们可以直接复制使用，写成全局自定义指令。多的地方使用，并且只做加法1.来到src/创建directive文件夹2.在src/directive/创建dialog文件夹专门用来放关于dialog的代码。
【JS功能】前端实现可拖拽弹出框功能
leo的博客
03-27 333
【JS功能】前端实现可拖拽弹出框功能
css 弹出框可移动,JavaScript_JS+CSS实现可拖动的弹出提示框，本文实例讲述了JS+CSS实现可拖 - phpStudy...
weixin_39816260的博客
08-04 423
JS+CSS实现可拖动的弹出提示框本文实例讲述了JS+CSS实现可拖动的弹出提示框。分享给大家供大家参考。具体实现方法如下：JS+CSS打造的可拖动的弹出提示框a{ color:#000; font-size:12px;text-decoration:none}a:hover{ color:#900; text-decoration:underline}body{background:;filte...
【jQuery】jQuery弹出框可拖拽移动
冰冷的希望的博客
06-16 1018
1.说明 此demo需要用到jQuery和bootstrap，使用前需要先引入相关文件 因为内容比较简单，所以就不多说明了 2.相关代码 位置排版使用了绝对定位，部分是写死的，实际情况应该修改为动态自适应 <div id="windowWithdraw"> <div id="windowTitle"> <span id="windowClose">关闭</span> <div>提现状态重置</div&g
vue实现移动弹出框
任某某的博客
09-11 961
<template> <div> <div> <a-button type="primary" @click="showModal">Open Modal</a-button> <a-modal v-model="visible" title="Basic Modal" @ok="handleOk"> <p>Some contents...</p>
js 实现可以移动位置的弹出框
hw1287789687的专栏
05-23 842
1,先看下效果:  而且对话框是可以拖动的:  点击对话框右上角的X 可以关闭对话框: 2,核心代码 边框阴影效果:   div.shadow { -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=143, Color=#EA4748)"; /*IE 8*...
html 弹窗实现拖拽,js实现弹出框的拖拽效果实例代码详解
weixin_36337502的博客
06-17 320
具体代码如下所示：//HTML部分弹出框确定取消//CSS部分.wrap {position: fixed;left: 0;top: 0;background-color: #000;z-index: 10000;opacity: 0.3;}.popUpBox {height: 400px;width: 700px;position: absolute;overflow: hidden;box-s...
js实现弹出框的拖拽效果实例代码详解
10-17
本文通过实例代码给大家介绍了js实现弹出框的拖拽效果，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
原生js实现弹出层登录拖拽功能
10-20
在网页开发中，为了提升用户体验，常常需要实现各种交互效果，比如弹出层登录功能，并且这个弹出层还需要具备拖拽的能力。本篇将详细讲解如何使用原生JavaScript实现这样的功能。 首先，我们需要理解几个关键的概念...
可拖拽的bootstrap弹出窗口
07-20
最后，`script.js`文件是项目的JavaScript代码，可能包含了初始化弹出窗口和拖拽功能的逻辑。例如，可能有代码片段像`$(function() { $('.popover').popover(); });`来启动Bootstrap Popover，以及`$(".popover")....
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 472
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1299
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1083
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
js实现留言板 点击弹出留言功能 拖住移动 蒙版
09-04
JS实现留言板的过程如下： 首先，我们需要在HTML中创建一个留言板的容器，可以是一个div元素，然后在CSS中设置其样式，包括显示位置、大小、背景颜色等。 接下来，在JS中，我们可以通过事件监听，例如点击事件，来触发弹出留言功能。可以通过给留言板容器添加一个点击事件监听器，当点击事件发生时，触发弹出留言的逻辑。 弹出留言的逻辑可以通过JS动态创建一个留言框的元素，可以是一个文本输入框加上一个发送按钮。创建元素的过程可以使用DOM操作，通过createElement方法来创建元素节点，然后通过appendChild方法将其添加到留言板容器中。 接着，我们可以通过拖拽事件监听器来实现拖住移动蒙版的功能。可以通过给蒙版元素添加一个鼠标按下事件监听器，在鼠标按下时获取鼠标的位置坐标。然后在鼠标移动事件监听器中，计算鼠标位置的偏移量，并将蒙版元素的位置跟随鼠标移动进行相应的更新，可以通过设置蒙版元素的定位属性来实现。 最后，我们可以在JS中添加一层蒙版元素，用于遮挡页面的其他内容，以便实现点击弹出留言板时，将焦点限制在留言板内。可以通过给蒙版元素设置一些样式，例如半透明的背景颜色，来实现这一效果。 综上所述，就是用JS实现留言板的基本思路和步骤。通过事件监听和DOM操作，我们可以实现点击弹出留言功能，拖住移动蒙版等功能，以提升留言板的交互性和用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值