Ant Design -- 圖片可拖拽效果，圖片跟隨鼠標移動

Ant Design 圖片可拖拽效果，圖片跟隨鼠標移動，需計算鼠標在圖片中與圖片左上角的X軸的距離和鼠標在圖片中與圖片左上角的Y軸的距離。

constructor(props) {
        super(props);
        this.dragDrop = false; // 圖片是否被拖動中
        this.apartX = 0; // 鼠標在圖片中與圖片左上角的X軸的距離
        this.apartY = 0; //鼠標在圖片中與圖片左上角的Y軸的距離
        this.state = {
            previewVisible: false,
            previewImage: ''
        }
}

    //圖片點擊查看
    handlePreview = (url) => {
        this.setState({
            previewImage: url,
            previewVisible: true,
        });
    };
    // 關閉圖片預覽
    closeImgIcon = () => {
        this.setState({
            previewVisible: false
        });
    }
    // 圖片跟隨鼠標移動
    _qxmouseMove = (event) => {
       this.dragDrop = false;
    }
    _mouseDown = (event) => {
        this.dragDrop = true;
        const imgWrap = this.refs.showPreviewImageWrap;
        this.apartX = event.pageX - imgWrap.offsetLeft;// 鼠標在圖片中與圖片左上角的X軸的距離
        this.apartY = event.pageY - imgWrap.offsetTop;

        event.preventDefault();
        event.stopPropagation();
    }
    _mouseUp = (event) => {
        this.dragDrop = false;

        event.preventDefault();
        event.stopPropagation();
    }
    _mouseMove = (event) => {
        if (!this.dragDrop) {
            return;
        }

        const imgWrap = this.refs.showPreviewImageWrap;
        imgWrap.style.left = (event.pageX - this.apartX)+ 'px';
        imgWrap.style.top = (event.pageY - this.apartY) + 'px';

        event.preventDefault();
        event.stopPropagation();
    }
    //圖片后綴判斷
    imgSuffix = (url) => {
        let suffix = url.substring(url.length - 3);
        return suffix
    };

{this.state.previewVisible &&
    <div className="ant-modal-wrap" onMouseMove={this._qxmouseMove.bind(this)}>
       <div className='show_picture_image_wrap'
       onMouseUp={this._mouseUp.bind(this)} 
       onMouseDown={this._mouseDown.bind(this)} 
       onMouseMove={this._mouseMove.bind(this)}
       ref="showPreviewImageWrap" >
          <Icon className="close-imgIcon" type="close-circle" onClick={() => this.closeImgIcon()}/>
          {
            (previewImage.indexOf('.pdf') > 0) ?
               <iframe src={previewImage} frameBorder="0"
               style={{width: '100%', height: '800px'}}></iframe> :
               <img alt="example"  style={{width: '100%'}} src={previewImage}/>
           }
       </div>
    </div>
 }

 在div叫 ant-modal-wrap 增加onMouseMove 設置this.dragDrop=false;即鼠標離開需要拖拽的盒子，則取消拖拽事件。

用onMouseMove做拖拽時要注意iframe，在鼠標經過iframe時，鼠標就會失去控制。

解決：iframe { pointer-events:none; }  （但是iframe的點擊，滾動等事件會消失）