I'm trying to create a drag and drop folder like behavior for an angular/ionic project. In the background it works perfectly fine but visually the drag element gets cut off when it is not fully visible in the viewport. Below a visual representation of what i'm trying to say.
| Image | Description |
|---|---|
 |
UI Element cut off while being dragged when partially out of viewport |
 |
UI Element shown fully when being dragged when fully in viewport |
Here is a project i created where the issue can be reproduced. https://github.com/Deitsch/ionic-draggable-cutoff
I have found out that this only happens if both circumstances apply:
- the draggable element being outside of the viewport
- the element is a component loaded in an
router-outlet
The drag works fine in a simple html file like the example code below.
<!DOCTYPE html>
<style>
.box {
height: 300px;
width: 300px;
border-radius: 8px;
background-color: red;
}
.spacer {
height: 700px;
width: 20px;
}
</style>
<html>
<div class="spacer"></div>
<div class="box" draggable="true"></div>
</html>
What can i do to get the whole HTML element when dragging in an router-outlet?