Limiting a cdkDrag element to a specific div without using cdkDragBoundary

I have a two column page, and I have a cdkDrag element in the right column. For some reasons I can't use cdkDragBoundary property to bound the element to the right column. Instead, I am thinking to not allow the element to pass the borders of the left column (something like invert Boundary) Is there any css solution for it? (Or any other solution that I am forgetting!)

Here is my code:

<div class="column-s">
<span>Left column</span>
</div>
<div class="column-b">
<span>Right column</span>
<div class="container" cdkDrag>
<span> cdkDrag element must stay in the right column!</span>
</div>
</div>



.css

* {
box-sizing: border-box;
}

.column-s {
float: left;
width: 10%;
padding: 10px;
height: 300px;
border-right: dotted 2px rgb(231, 229, 229);
}

.column-b {
float: left;
width: 90%;
padding: 10px;
height: 300px;
}

Continue reading...