angular2-draggable
angular2-draggable copied to clipboard
xieziyu
Resize bounds on a draggable element inside a containment is off.
When adding ngDraggable to a resizable div with a containment, after moving the div the resize bounds are off (goes outside the containment).
@aviad123 Thank you for reporting this issue. Dragging div is implemented by CSS transform functions. Resize bounds remain there, but the directive doesn't check the transformed properties. Need to fix this issue.
The same situation for me. Containment doesn't work correct with ngDraggable and ngResizable.
@aviad123 @miikkikiikki @smaranh
Sorry for the late response. Please try the latest version: [email protected]
@xieziyu Thanks for such a quick fix but I found another issue. Not sure if this is only happening to me. The first time I click on the DragHandle or the Resize handle in the bottom right, the component jumps and tries to snap to the edge of the container inside which it is contained. Any idea why this is? This only happens for draggable if bounds is set and only happens for reSizable if rzContainment is set.
This only happens the first time and after that, it works properly.
I will post a gif soon.
@xieziyu I finally figured out why the jump is happening. If you have the resizable or draggable container with position:absolute it is a problem since it conflicts with the draggable and resizable style which is position:relative. Here is the sample
https://stackblitz.com/edit/angular-cli-esri-map2-qyyzpu?file=src/app/app.component.html
Do you think I should close this issue and create a new one for this?
@smaranh Thank you, it's very helpful. I will double check it.
I found that the issue came out because your rzContainment element has no position style defined. If you add position: relative or any other non-static style to .title class, the issue should be fixed.
The reason is that the draggable and resizable directives need to calculate the position inside the containment, which requires the containment not static.