Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

Posted 2021-03-22 juewuzhe

Ant Design 图片可拖拽效果，图片跟随鼠标移动，需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离。

constructor(props) {
        super(props);
        this.dragDrop = false; // 图片是否被拖动中
        this.apartX = 0; // 鼠标在图片中与图片左上角的X轴的距离
        this.apartY = 0; //鼠标在图片中与图片左上角的Y轴的距离
        this.state = {
            value: 1,
            previewVisible: false,
            previewImage: ‘‘
        }
}

    //图片点击查看
    handlePreview = (url) => {
        this.setState({
            previewImage: url,
            previewVisible: true,
        });
    };
    // 关闭图片预览
    closeImgIcon = () => {
        this.setState({
            previewVisible: 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;
        }
        if(this.apartX === 100 || this.apartY === 100){
            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">
       <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>
 }