Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
import React from 'react';
import { Draggable, Panel } from 'rc-easyui';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      containerWidth: 500,
      containerHeight: 300,
      dragWidth: 100,
      dragHeight: 100
    }
  }
  handleDrag(event) {
    const { containerWidth, containerHeight, dragWidth, dragHeight } = this.state;
    var d = event;
    if (d.left < 0) {
      d.left = 0;
    }
    if (d.top < 0) {
      d.top = 0;
    }
    if (d.left + dragWidth > containerWidth - 2) {
      d.left = containerWidth - 2 - dragWidth;
    }
    if (d.top + dragHeight > containerHeight - 2) {
      d.top = containerHeight - 2 - dragHeight;
    }
    d.target.applyDrag();
  }
  render() {
    const { containerWidth, containerHeight, dragWidth, dragHeight } = this.state;
    const panelStyle = {
      position: "relative",
      width: containerWidth + "px",
      height: containerHeight + "px"
    }
    const dragStyle = {
      border: "1px solid #ccc",
      width: dragWidth + "px",
      height: dragHeight + "px"
    }
    return (
      <div>
        <h2>Constrain Draggable</h2>
        <Panel bodyStyle={panelStyle}>
          <Draggable onDrag={this.handleDrag.bind(this)}>
            <div style={dragStyle}>
              <p style={{ textAlign: 'center' }}>Drag Me</p>
            </div>
          </Draggable>
        </Panel>
      </div>
    );
  }
}

export default App;