Ant Design -- 图片可拖拽效果,图片跟随鼠标移动
时间:2022-03-12 21:29
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> }
相关推荐
- Android系统编程入门系列之界面Activity交互响应
- 新型横向移动工具原理分析、代码分析、优缺点以及检测方案
- uni-app滚动视图容器(scroll-view)之监听上拉事件
- uniapp h5,app两端复制文本
- Android系统编程入门系列之界面Activity响应丝滑的传统动画
- 【Azure 应用服务】App Service 配置 Application Settings 访问Storage Account得到 could not be resolved: '*.file.core.windows.net'的报错。没有解析成对应中国区 Storage Account地址 *.file.core.chinacloudapi.cn
- 诺基亚短信生成!太好玩了
- iOS 跳转App Store进行评分
- 开发一个即时通讯App
- 关闭苹果IOS app自动更新
电脑软件
本类排行
- 1关闭苹果IOS app自动更新
- 2iOS 跳转App Store进行评分
- 3诺基亚短信生成!太好玩了
- 4Android系统编程入门系列之界面Activity响应丝滑的传统动画
- 5uniapp h5,app两端复制文本
- 6uni-app滚动视图容器(scroll-view)之监听上拉事件
- 7新型横向移动工具原理分析、代码分析、优缺点以及检测方案
- 8Android系统编程入门系列之界面Activity交互响应
- 9开发一个即时通讯App
- 10【Azure 应用服务】App Service 配置 Application Settings 访问Storage Account得到 could not be resolved: '*.file.core.windows.net'的报错。没有解析成对应中国区 Storage Account地址 *.file.core.chinacloudapi.cn