antd modal 拖动_让Antd 的Modal 可以拖动

最新推荐文章于 2024-05-17 16:07:17 发布
最新推荐文章于 2024-05-17 16:07:17 发布
阅读量836 收藏
点赞数
文章标签： antd modal 拖动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34180753/article/details/113023421
版权

需求：

为了提升交互体验，满足用户“不关弹窗还能看弹窗下的页面”的需求，需要弹窗可以随意拖动位置。

原本ant design的弹窗没有拖拽功能，但是为了保留原本功能样式，我们要拓展一下这个Modal组件。

思路：

1、首先需要两个DIV，一个是和视口一样大的drag-mask，绑定mouseMove事件和mouseUp事件，用来作为拖拽参照；另一个是和Modal一样大的drag-target，绑定mouseDown事件。

2、已知Modal的样式.ant-modal{position:relative;top:100px;left:0px;}，可见通过更改top、left我们将可以改变Modal位置。

3、mouseDown事件时，显示drag-mask，并记录坐标(preX,preY)；

4、mouseMove事件时，Modal的新位置=Modal的原位置+移动距离:

left2 = left1 + (pageX-preX);

top2 = top1 + (pageY-preY);

图示：由灰色位置移动到蓝色位置，箭头表示拖拽轨迹

13853a2466c0a254daf19bbee9f8fdff.png

5、mouseMove到窗口边缘时不能继续拖动，误差10px，也就是说拖拽时鼠标移动到靠近窗口边缘10px时就自动mouseUp(防止拖出视

最低0.47元/天 解锁文章
13775689191
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd modal 拖动_Ant-design Modal实现可以拖动的效果
weixin_31622725的博客
01-31 2245
最近项目组在开发的时候提出了一个需求，需要让 ant-design Modal实现能够拖动的功能，研究了一番，基于 and-design Modal自己封装了一个antd-draggable-modal组件。特性：支持弹出窗居中打开支持拖拽 title bar 实现拖拽支持多层弹窗拖拽实现原理要实现 Modal 的拖拽，首先要弄清楚 Modal 的位置跟什么有关系，打开浏览器，通过F12 调试窗口...
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
蚂蚁设计可拖动模态 Ant Design的模态，可拖动。 :globe_showing_Americas: :sparkles: 特征 用标题栏拖动。 调整大小与句柄。 保持界限。 在拖动过程中。 调整大小期间。 在调整窗口大小期间。 具有托管zIndex多个模态。 从中心打开。 用作受控组件的更好的API。 从象限打开。 更好的转义密钥管理。 使用选项键调整大小。 :package: 安装 yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' import { DraggableModal , DraggableModalProvider } from
Ant Design 中 的Modal全屏显示
最新发布
【爱打盹的喵】的专栏
05-17 459
全文参考，并结合自己的项目具体情况而来，本意是用来记录自己在做此功能时遇到的问题。
antd modal新增可拖动功能
李泽言的博客
05-12 957
antd modal，新增可拖动功能
Ant中Modal组件实现可拖动/拖拽功能
weixin_54754781的博客
07-01 1173
Ant Design组件库中的Modal组件实现可拖动/拖拽功能封装的组件
antd modal 拖动_antd的Modal可移动（可拖拽）
weixin_36415235的博客
01-31 1860
通过第三方插件实现使用方法：npm install dragm -S2.安装后运行如果出现缺少.less，则在命令行>yarn install(或直接运行 yarn)，然后再运行3.新建一个文件ModalDrag.jsimport DragM from 'dragm';export default class ModalDrag extends React.Component {update...
实现antd modal 组件 自定义可拖拽指令
weixin_44037153的博客
03-10 323
antd vue 的 modal 组件 自定义可拖拽指令
antd-modal-dragable:在蚂蚁金服的antd库的modal组件上，新增可拖动功能
04-28
在蚂蚁金服的antd库的modal组件上，新增可拖动功能，完全复用antd-modal的全部api，支持同时打开多个窗口 新增以下三个api 1.dragable 类型boolean,是否可拖动，默认true,开启此项后，首次位置水平方向不再居中，要...
Modal 的动画效果
04-05
作者maru-3，源码AnimateModal，一个 Modal 的动画效果，大家可以了解一下吧。
React-Native 组件之 Modal的使用详解
08-29
本篇文章主要介绍了React-Native 组件之 Modal的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
antd Modal组件拖动功能的一种实现方式
草率小猿的博客
12-20 2356
对于一些弹窗组件，其中一个比较高的使用场景是拖拽功能。然而如antd的Modal组件、element ui 的Dialog组件等等其他UI，自带的弹窗却原生不支持拖拽功能，却是一大遗憾。下面给出一种基于draggable组件来实现拖拽效果的一种实现方法。
antd Design Model弹框可拖拽(可移动)
Zeroliuyun的博客
12-28 837
React在使用antd项目中需要使用Model弹框，弹框展示(弹出时),需要可以拖拽移动弹框，并且不能超过可视范围。
基于antd-Modal扩展的可拖拽框
weixin_42885978的博客
04-12 361
亲测可用 import { PureComponent } from 'react'; import { Modal } from 'antd'; class MoveModal extends PureComponent { constructor(props) { super(props) //Modal 的初始值 this.state = { styleTop: 100, styleLeft: 0, } } //计算是否超出屏幕;
antd modal 拖动_Antd Modal 实现拖动功能
weixin_35006125的博客
01-17 1772
思路：1、首先需要两个DIV，一个是和视口一样大的drag-mask，绑定mouseMove事件和mouseUp事件，用来作为拖拽参照；另一个是和Modal一样大的drag-target，绑定mouseDown事件。2、已知Modal的样式.ant-modal{position:relative;top:100px;left:0px;}，可见通过更改top、left我们将可以改变Modal位置。3...
antdVue中a-modal的拖拽移动功能
Sxyyy1的博客
04-20 1727
【代码】antdVue中a-modal的拖拽移动功能。
antd+vue弹窗实现拖拽功能
nice444638562的博客
07-17 2038
请注意，上述只是一个简单的示例，你还可以根据实际需求进行更多自定义和扩展。另外，如果你想添加更高级的拖拽功能，你可能需要使用其他拖拽库或自行编写代码来实现。请注意，这只是一个简单的示例，仅实现了最基本的拖拽功能。你可以根据你的实际需求自定义自己的指令，并在其中添加更多的拖拽逻辑和样式。另外，如果你使用的是 TypeScript，记得在 Vue 组件中添加指令的类型声明。上面的代码中，我们使用了 Modal 组件来创建弹窗，并在弹窗内部嵌套了。你可以根据需要自定义弹窗的样式和内容，以及在。
实现Ant Design Vue的modal可拖拽
冰咖啡的专栏
08-04 4049
​ 公司最近在做的一个Ant Design Vue项目，其中的某个功能页面的modal弹出框遮挡了页面的部分内容，所以需要这个modal能够用鼠标拖拽到任意位置。 ​
Vue3 + Ant Design Vue Modal 对话框可拖拽指令
weixin_50651687的博客
11-11 2050
Vue3-Antd Modal 对话框可拖拽指令实现 详细 复制即可使用
antd modal 拖动
06-01
要实现antd Modal的拖动功能，可以使用react-draggable库来实现。 首先，安装react-draggable库： ```bash npm install react-draggable ``` 然后，在Modal组件中引入react-draggable，并将Modal包裹在Draggable组件中： ```jsx import React from 'react'; import { Modal } from 'antd'; import Draggable from 'react-draggable'; class DraggableModal extends React.Component { render() { return ( <Draggable> <Modal {...this.props} /> </Draggable> ); } } ``` 最后，使用DraggableModal组件替换antd的Modal组件即可： ```jsx <DraggableModal title="Basic Modal" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} > <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p> </DraggableModal> ``` 这样就可以实现antd Modal的拖动功能了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值