foreword
For some pop-up window components, one of the relatively high usage scenarios is the drag and drop function. However, for other UIs such as antd Modalcomponents, element ui Dialogcomponents, etc., the pop-up windows that come with them do not natively support the drag and drop function, which is a great pity.
Of course, for antd Modalcomponents, the official document provides a react-draggabledrag-and-drop effect based on: https://ant.design/components/modal-cn#components-modal-demo-modal-render .
The following is an draggableimplementation method based on components to realize the dragging effect.
Implementation
aboutdraggable
draggableThe instructions given are:
High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped) , dependency-free package. js library.
Github address: https://github.com/bcherny/draggable
We can installnpm through or :yarn
$ npm install draggable --save
draggableFor specific usage methods, please refer to the Readme document of the Github library, so I won’t go into details here.
integrateddraggable
Antd Modaldoes not natively support drag and drop, we need to Modalinitialize Draggablethe component after opening. It should be noted that Modalinitialization is not required every time it is opened Modal, only after the first opening Modal. The specific code is as follows:
import React from "react";
import Draggable from "draggable";
import {
Button, Modal } from "antd";
import {
ModalProps } from "antd/lib/modal/Modal";
interface IState {
open: boolean;
draggableInited: boolean; // draggable初始化标识
}
export default class DraggableModal extends React.Component<
ModalProps,
IState
> {
constructor(props: ModalProps | Readonly<ModalProps>) {
super(props);
this.state = {
open: false,
draggableInited: false
};
}
showModal() {
this.setState({
open: true }, this.initDrag);
}
closeModal() {
this.setState({
open: false });
}
initDrag() {
// 仅限于首次打开，进行初始化draggable操作
if (!this.state.draggableInited) {
// 目标为：Modal组件
const ele = document.querySelector(".custom-draggable-modal");
new Draggable(ele, {
// 拖拽handle设置为Modal头部，不设置此参数表示整个Modal都可拖拽
handle: document.querySelector(".ant-modal-header")
});
// 初始化完成后，对draggableInited置于true
this.setState({
draggableInited: true });
}
}
render() {
return (
<div>
<Button type="primary" onClick={
() => this.showModal()}>
Open Modal
</Button>
<Modal
// 对Modal添加class：custom-draggable-modal
className="custom-draggable-modal"
open={
this.state.open}
onOk={
() => this.closeModal()}
onCancel={
() => this.closeModal()}
// Modal其他属性由父组件传入
{
...this.props}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</div>
);
}
}
achieve effect
The specific implementation effect is as follows: For
detailed code, please move to codesandbox: https://codesandbox.io/s/kind-thunder-nfu40p?file=/src/DraggableModal.tsx
postscript
Since draggableit is a pure js implementation library and does not depend on other third-party libraries, it is not draggableonly used for react ui libraries, such as: antd, but also for vue/angular ui libraries such as element ui and other libraries. The implementation method is similar to the above example , do not expand to explain.
If you have any questions, you can communicate in the comment area. Also welcome to like ⭐Favorites :)
Further reading: