Resize bounds on a draggable element inside a containment is off.

[aviad123]

When adding ngDraggable to a resizable div with a containment, after moving the div the resize bounds are off (goes outside the containment).

[xieziyu]

@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.

[miikkikiikki]

The same situation for me. Containment doesn't work correct with ngDraggable and ngResizable.

[smaranh]

Is there any timeline as to when this will be fixed?

[xieziyu]

@aviad123 @miikkikiikki @smaranh
Sorry for the late response. Please try the latest version: angular2-draggable@2.1.4

[smaranh]

@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.

[smaranh]

@xieziyu Here is the gif

[xieziyu]

@smaranh
I still can't reproduce this issue.

[smaranh]

@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?

[xieziyu]

@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.

[smaranh]

Thanks @xieziyu you are a life saver