At the moment, I am facing an issue where the element is restricted from moving outside of the container with the class of card-width-height. My goal is to have the right and bottom sides bounded within the container while allowing the element to move beyond the top and left sides, but still be hidden. Can anyone provide assistance?
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;
Here is the CSS code:
.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;
}