javascript - 使抽屉可调整大小的推荐方法？

Question

我想通过可拖动的 handle 调整 Material ui 抽屉的宽度。 我目前的方法是在整个应用程序上设置一个 mousevent 监听器，该监听器检查是否按下了句柄，并在每次鼠标移动时根据鼠标位置更新宽度。

然而，这需要在整个应用程序上有一个持续的鼠标事件监听器，这对于一个简单的调整大小功能来说似乎有点过分了。

是否有更好/推荐的调整大小的方法？

Answer 1

您可以使用带有 mousedown 的指示器拖动器。

以这里为例

// styles
dragger: {
  width: '5px',
  cursor: 'ew-resize',
  padding: '4px 0 0',
  borderTop: '1px solid #ddd',
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  zIndex: '100',
  backgroundColor: '#f4f7f9'
}

...

state = {
  isResizing: false,
  lastDownX: 0,
  newWidth: {}
};

handleMousedown = e => {
  this.setState({ isResizing: true, lastDownX: e.clientX });
};

handleMousemove = e => {
  // we don't want to do anything if we aren't resizing.
  if (!this.state.isResizing) {
    return;
  }

  let offsetRight =
    document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
  let minWidth = 50;
  let maxWidth = 600;
  if (offsetRight > minWidth && offsetRight < maxWidth) {
    this.setState({ newWidth: { width: offsetRight } });
  }
};

handleMouseup = e => {
  this.setState({ isResizing: false });
};

componentDidMount() {
  document.addEventListener('mousemove', e => this.handleMousemove(e));
  document.addEventListener('mouseup', e => this.handleMouseup(e));
}

...

<Drawer
  variant="permanent"
  open
  anchor={'right'}
  classes={{
    paper: classes.drawerPaper
  }}
  PaperProps={{ style: this.state.newWidth }}
>
  <div
    id="dragger"
    onMouseDown={event => {
      this.handleMousedown(event);
    }}
    className={classes.dragger}
  />
  {drawer}
</Drawer>

想法是，当单击拖动器时，它会随着鼠标移动调整 Drawer 的宽度。

播放 DEMO .