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

最新推荐文章于 2024-07-25 17:16:38 发布
最新推荐文章于 2024-07-25 17:16:38 发布
阅读量928 收藏
点赞数
文章标签： antd modal 拖动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34180753/article/details/113023421
版权
本文介绍了如何为Ant Design的Modal组件添加拖动功能，以提高用户体验。通过创建两个DIV并监听鼠标事件，计算Modal的新位置，实现拖拽效果。同时，文章解决了在拖动过程中Modal内元素不可点击的问题，通过调整元素定位实现。
摘要由CSDN通过智能技术生成

需求：

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

原本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
关注
Ant中Modal组件实现可拖动/拖拽功能
weixin_54754781的博客
07-01 1417
Ant Design组件库中的Modal组件实现可拖动/拖拽功能封装的组件
antd-modal-dragable:在蚂蚁金服的antd库的modal组件上，新增可拖动功能
04-28
antd-modal-dragable 在蚂蚁金服的antd库的modal组件上，新增可拖动功能，完全复用antd-modal的全部api，支持同时打开多个窗口 新增以下三个api 1.dragable 类型boolean,是否可拖动，默认true,开启此项后，首次位置水平方向不再居中，要手动设置初始位置 2.limit 类型boolean,是否限制不能移出屏幕，默认false 3.autoIndex 类型boolean,是否自动置顶，点击窗口时此窗口置于最高层，开启此项时，mask会失效，新打开的窗口会自动置顶 使用方法 下载库中的Modal.js，放到自己的项目中，此文件依赖antd，如未安装antd，则无法使用该组件
antdVue中a-modal的拖拽移动功能
Sxyyy1的博客
04-20 2074
【代码】antdVue中a-modal的拖拽移动功能。
antd modal新增可拖动功能
李泽言的博客
05-12 1011
antd modal，新增可拖动功能
antd Design Model弹框可拖拽(可移动)
Zeroliuyun的博客
12-28 1054
React在使用antd项目中需要使用Model弹框，弹框展示(弹出时),需要可以拖拽移动弹框，并且不能超过可视范围。
antd modal 拖动_antd的Modal可移动（可拖拽）
weixin_36415235的博客
01-31 1908
通过第三方插件实现使用方法：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 399
antd vue 的 modal 组件 自定义可拖拽指令
antd modal 拖动_Antd Modal 实现拖动功能
weixin_35006125的博客
01-17 1848
思路：1、首先需要两个DIV，一个是和视口一样大的drag-mask，绑定mouseMove事件和mouseUp事件，用来作为拖拽参照；另一个是和Modal一样大的drag-target，绑定mouseDown事件。2、已知Modal的样式.ant-modal{position:relative;top:100px;left:0px;}，可见通过更改top、left我们将可以改变Modal位置。3...
antd modal 拖动_Ant-design Modal实现可以拖动的效果
weixin_28903813的博客
01-17 1357
最近项目组在开发的时候提出了一个需求，需要让 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
antd Modal组件拖动功能的一种实现方式
草率小猿的博客
12-20 2697
对于一些弹窗组件，其中一个比较高的使用场景是拖拽功能。然而如antd的Modal组件、element ui 的Dialog组件等等其他UI，自带的弹窗却原生不支持拖拽功能，却是一大遗憾。下面给出一种基于draggable组件来实现拖拽效果的一种实现方法。
基于antd-Modal扩展的可拖拽框
weixin_42885978的博客
04-12 395
亲测可用 import { PureComponent } from 'react'; import { Modal } from 'antd'; class MoveModal extends PureComponent { constructor(props) { super(props) //Modal 的初始值 this.state = { styleTop: 100, styleLeft: 0, } } //计算是否超出屏幕;
antd使用react-draggable,实现Modal拖拽，hooks写法
lxc19930325的博客
07-24 614
Ant Design 提供的Modal是不支持拖动，基于这一点我们需要自定义一个我们自己的Modal组件，来实现拖动。其中会用到的技术有：使用react-draggable来实现modal的拖动。
react+antd model框的全屏及拖拽（个人配置）
最新发布
b55552的博客
07-25 419
react+antd model框的全屏及拖拽
前端使用Ant Design中的Modal框实现长按顶部拖动弹框需求
孜然卷的博客
03-08 583
【代码】前端使用Ant Design中的Modal框实现按住顶部拖动需求。
Antd Modal 可拖拽移动
Z_Wonderful的博客
02-08 2437
实现antd Modal 弹窗或者其他弹窗的点击标题进行拖拽的效果。
Antd Modal 拖拽功能
忘川
03-03 4044
1 安装dragm npm install dragm 2封装组件ModalDrag.js import React, { PureComponent } from "react"; import DragM from "dragm"; export default class ModalDrag extends PureComponent { updateTransform = ...
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、付费专栏及课程。

余额充值