drag-zoom-container

描述

drag-zoom-container 是一个 React 容器组件，放在里面的组件可以拖拽，滚动缩放。

在线效果：https://rhyszhao.github.io/drag-zoom-container/

安装

npm install drag-zoom-container --save

使用

1. 引入

import DragZoomContainer from 'drag-zoom-container';

2. 使用

<DragZoomContainer>
    <div style={{ width: 100, height: 150, background: 'red' }} />
</DragZoomContainer>

其中，DragZoomContainer内的 div 即为要拖拽、缩放的内容。

属性

属性	描述	类型	默认值
zoomOnInner	鼠标是否放在缩放组件上才可滚动缩放	boolean	false
zoomRange	缩放倍数范围	object	{ min: 0.5, max: 5 }
zoomOrigin	缩放源，具体参考 css 属性 transform-origin	string	"50% 50%"
dragInDocument	拖拽是否限制在整个文档。false 限制拖拽在父容器内	boolean	true
outerStyle	容器组件的样式，默认宽、高等于父元素	object	{}
position	拖拽组件在容器中的位置。默认左上角	object	{ top: 0, left: 0 }