+
+
+
-
- );
-};
-
-class SnapToPositionExample extends Component {
-
- constructor(props) {
- super(props);
- this.state = {
- size: undefined,
- dragging: false,
- };
- this.handleDragStart = this.handleDragStart.bind(this);
- this.handleDragEnd = this.handleDragEnd.bind(this);
- this.handleDrag = this.handleDrag.bind(this);
- }
-
- handleDragStart() {
- this.setState({
- dragging: true,
- });
- }
-
- handleDragEnd() {
- this.setState({
- dragging: false,
- });
- setTimeout(() => {
- this.setState({ size: undefined });
- }, 0);
- }
-
- handleDrag(width) {
- if (width >= 300 && width <= 400) {
- this.setState({ size: 300 });
- } else if (width > 400 && width <= 500) {
- this.setState({ size: 500 });
- } else {
- this.setState({ size: undefined });
- }
- }
-
- render() {
- const dropWarnStyle = {
- backgroundColor: 'yellow',
- left: 300,
- width: 200,
- };
- const centeredTextStyle = {
- position: 'absolute',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- height: '100%',
- };
- return (
-
-
-
-
-
-
- Can drop anywhere
-
-
- Will snap to edges
-
-
- Can drop anywhere
-
-
+