javascript - 如何通过拖动整个底部边框线而不是右下角来调整div高度？

Question

我有一个反应组件。我可以通过添加resize: vertical; overflow: auto;我的 css 文件来调整高度。但是，我只能通过拖动边框的右下角来进行调整。是否可以将其更改为整个底线？或者任何其他反应api可以实现这一点？这是我如何通过拖动右下角来调整高度的示例。

这是我的组件。

<div class='map'>
      <MyMapComponent
        handleChange={this.handleChange}
        handleSubmit={this.handleSubmit}
        date ={this.state.date}
        getMap={this.getMap}
        updateStatus = {this.state.updateStatus}
        filter={this.state.filter}
        filterList={this.state.filterList}
        inputProps={{
            classes: {
                input: classes.multilineColor
            }
        }}
      >
      {/*this.getMap()*/}

      </MyMapComponent>
         </div>

这是我的css文件。

.map{
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: vertical;
  overflow: auto;
}

标签： javascriptcssreactjslayoutborder

Answer 1

我按照这个水平调整大小面板示例来创建一个垂直的。

这是我编辑的调整大小面板

import React from "react"
import ReactDOM from "react-dom";
import './ResizablePanels.css';

class ResizablePanels extends React.Component {
  eventHandler = null

  constructor () {
    super()

    this.state = {
      isDragging: false,
      panels: [800, 300, 0]
    }
  }

  componentDidMount () {
    ReactDOM.findDOMNode(this).addEventListener('mousemove', this.resizePanel)
    ReactDOM.findDOMNode(this).addEventListener('mouseup', this.stopResize)
    ReactDOM.findDOMNode(this).addEventListener('mouseleave', this.stopResize)
  }

  startResize = (event, index) => {
    this.setState({
      isDragging: true,
      currentPanel: index,
      initialPos: event.clientY
    })
  }

  stopResize = () => {
    if (this.state.isDragging) {
      console.log(this.state)
      this.setState(({panels, currentPanel, delta}) => ({
        isDragging: false,
        panels: {
          ...panels,
          [currentPanel]: (panels[currentPanel] || 0) - delta,
          [currentPanel - 1]: (panels[currentPanel - 1] || 0) + delta
        },
        delta: 0,
        currentPanel: null
      }))
      console.log(this.state)
    }
  }

  resizePanel = (event) => {
    if (this.state.isDragging) {
      //console.log(event.clientY +" "+this.state.initialPos);
      const delta = event.clientY - this.state.initialPos
      this.setState({
        delta: delta
      })
    }
  }

  render() {
    const rest = this.props.children.slice(1);
   // console.log(this.props);
    return (
      <div className="panel-container" onMouseUp={() => this.stopResize()}>
        <div className="panel" style={{height: this.state.panels[0]}}>
          {this.props.children[0]}
        </div>
        {[].concat(...rest.map((child, i) => {
          return [
            <div onMouseDown={(e) => this.startResize(e, i + 1)}
              key={"resizer_" + i}
              style={this.state.currentPanel === i+1 ? {top: this.state.delta} : {}}
              className="resizer"></div>,
            <div key={"panel_" + i} className="panel" style={{height: this.state.panels[i + 1]}}>
              {child}
            </div>
          ]
        }))}
      </div>
    )
  }
}

export default ResizablePanels;

这是我的这个面板的 css 文件

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

html {
  background: #333;
  font-family: sans-serif;
}
h1 {
  color: white;
}

.panel-container {
  display: flex;
  min-height: 100%;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.panel {
  background: #EEE;
  border: 0px solid gray;
  padding: 1px;
}
.panel:first-child {

}

.resizer {
  height: 8px;
  background: darkGray;
  position: relative;
  cursor: row-resize;
  flex-shrink: 0;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */ 
}

.resizer::after,
.resizer::before {
  content: "";
  border-left: 1px solid #333;
  position: absolute;
  top: 50%;
  transform: translateX(-100%);
  right: 0;
  display: inline-block;
  height: 20px;
  margin: 0 2px;
}
.resizer::before {
  top: 0;
}