序文
一部のポップアップ ウィンドウ コンポーネントで、比較的使用頻度の高いシナリオの 1 つは、ドラッグ アンド ドロップ機能です。Modalただし、antdコンポーネント、要素 uiコンポーネントなどの他の UI の場合Dialog、それらに付属するポップアップ ウィンドウはドラッグ アンド ドロップ機能をネイティブでサポートしていないため、非常に残念です。
もちろん、antdModalコンポーネントの場合、公式ドキュメントはhttps://ant.design/components/modal-cn#components-modal-demo-modal-renderreact-draggableに基づくドラッグ アンド ドロップ効果を提供します。以下は、ドラッグ効果を実現するためのコンポーネントに基づく実装方法です。draggable
実装
だいたいdraggable
draggable与えられた指示は次のとおりです。
ハイ パフォーマンス、完全なクロス ブラウザー、フル機能のドラッグ アンド ドロップを小さな (2k gzip 圧縮) で、依存関係のないパッケージ
Github アドレス: https://github.com/bcherny/draggableまたは からインストール
できます。npmyarn
$ npm install draggable --save
draggable具体的な利用方法については、Github ライブラリの Readme ドキュメントを参照してください。ここでは詳しく説明しません。
統合されたdraggable
Antd はドラッグ アンド ドロップをネイティブにサポートしていないため、開いた後にコンポーネントを初期化するModal必要があります。開くたびに初期化が必要なわけではなく、最初に開いた後にのみ初期化する必要があることに注意してください。具体的なコードは次のとおりです。ModalDraggableModalModalModal
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>
);
}
}
効果を達成する
具体的な実装効果は次のとおりです:
詳細なコードについては、codesandbox に移動してください: https://codesandbox.io/s/kind-thunder-nfu40p?file=/src/DruggableModal.tsx
あとがき
これは純粋な js 実装ライブラリでありdraggable、他のサードパーティ ライブラリに依存しないため、draggableantd などの react ui ライブラリだけでなく、要素 ui やその他のライブラリなどの vue/angular ui ライブラリにも使用されます。実装方法は上記の例と似ていますが、説明のために拡張しないでください。
ご不明な点がございましたら、コメント欄でお問い合わせください。また、いいねを歓迎します⭐Favorites :)
参考文献：