(CdkDrag): Add Parent Container functionality for Draggable elements

[tx-ares]

Bug, feature request, or proposal:

Add functionality to define a parent container for a draggable element to be constrained to to prevent dragging off bounds.

What is the expected behavior?

Be able to define a parent container with a selector , ( e.g cdkDragParent ) so that a draggable element can not be dragged outside the container.

What is the current behavior?

You are able to drag items off screen leaving you no way to bring it back into view without refreshing the page.

What are the steps to reproduce?

Issue is visible in the demo section for Material:

1. Visit: https://material.angular.io/cdk/drag-drop/overview

2. Scroll down to "Alternate drag root element" section.

3. Click on "Open a draggable dialog" button.

4. Drag the modal off screen, and click anywhere to close it.

5. Click on "Open a draggable dialog" button again.

What is the use-case or motivation for changing an existing behavior?

I am using cdkDrag for draggable modals. Although I have no need for the "drop" feature of cdkDrag it would be very helpful to be able to define containers that a draggable item could be constrained to.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.3,
CDK 7.0.0,
Typescript 2.7.2

Is there anything else we should know?

[crisbeto]

See #14242.

[tx-ares]

Thank you! Any ETA on when that will be merged? @crisbeto

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}