javascript - 如何使一个元素的两个边有界且两个边都可 react 拖动？

当前，元素不能以card-width-height类移动到容器外部。我希望右侧和底部有两个边界，而顶部和右侧应该是开放的，即元素可以移动到容器之外但必须隐藏。谁能帮我吗。

import React from "react";
import Draggable from "react-draggable";
import "../css/touch.css";

class Card extends React.Component {

  handleStart = (e, data) => {
    console.log(e, data);
  };

  handleStop = (e, data) => {
    console.log(e, data);
  };

  render() {
     return (
      <div className="card-width-height">
        <Draggable
          axis="both"
          bounds="parent"
          defaultPosition={{ x: 180, y: 200 }}
          handle=".handle"
          onStart={this.handleStart}
          onStop={this.handleStop}
        >
          <div className="handle child-card" style={{ width: "50%" }}>
            <div>Screen 1</div>
          </div>
        </Draggable>
      </div>
    );
  }
}
export default Card;

这是CSS代码

.card-width-height {
  position: relative;
  max-width: 360px;
  min-height: 450px;
  background-color: #fff;
  border: 1px solid #000000;
  margin: 0 auto;
}

.child-card {
  height: 200px;
  font-weight: bold;
  background-color: yellow;
}

最佳答案

您可以通过bounds指定运动边界


  具有left, top, right, and bottom属性的对象。
  这些指示可拖动对象在每个方向上可以移动多远。
  
  范围：{左：数字，顶：数字，右：数字，底：数字}


所以你需要这样改变
bounds= {{left: 0, top: -100, right:360, bottom:350}}。所有数字均取决于您的宽度和高度参数。

在实践中查看this并亲自查看。

关于javascript - 如何使一个元素的两个边有界且两个边都可 react 拖动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59458813/