引言

写这篇文章的原因是因为在项目中用到了Antd Design的React组件，当有业务需求需要用到模态框的时候遇到了一些小问题，Antd的模态框Modal组件时不能拖拽的，一般情况下不可拖拽也没什么大的问题，但是遇到了客户提的需求，因此就想着在Modal组件原有的基础上进行扩展，封装一个可拖拽的模态框，当然我使用的这种方式不一定是最好的，所以仅仅是用于参考。

外部安装

可以使用npm或yarn安装，可以直接使用下面的那段代码

npm install dragm//ORyarn add dragm

源代码文件

这是我安装之后直接复制了它的代码，你可以直接复制下面这段代码然后引入到自己项目中，而不需要在额外的安装

//DragM.jsimport React from "react";import PropTypes from "prop-types";export default class DragM extends ponent { static propTypes = { children: PropTypes.element.isRequired }; static defaultProps = { //默认是移动children dom,覆盖该方法，可以把tranform行为同步给外部 updateTransform: (transformStr, tx, ty, tdom) => { tdom.style.transform = transformStr; } }; position = { startX: 0, startY: 0, dx: 0, dy: 0, tx: 0, ty: 0 }; start = event => { if (event.button !== 0) { //只允许左键，右键问题在于不选择conextmenu就不会触发mouseup事件 return; } document.addEventListener("mousemove