Obviously a bottom sheet isn't the best element to contain an image cropper, but hey, I try to avoid arguments with my UX team when possible.
Now because the version of Angular Material we are using doesn't support drag disabling for md-bottom-sheet, we have to hack around it. I'm okay with a little bit of hacking, but I'm certainly not going to modify Angular Material's core files over a questionable UX decision.
My compromise is to add a bit of code to our directive which intercepts and neutralizes $mdDrag events. Five lines of code for a one-off conflict doesn't seem like the end of the world.
The directive I'm modifying is nothing more than a button which opens a bottom sheet with a small form in it. All I need to do is attach a short function disableDrag to the scope which would is triggered when the bottom sheet is clicked.
function link(scope) {
scope.disableDrag = disableDrag;
scope.onClick = onClick;
function disableDrag() {
$('md-bottom-sheet') // find the bottom element
.on('$md.drag', e => false) // hold it still
.on('$md.dragend', e => false); // prevent closing
}
function onClick() {
$mdBottomSheet.show({
templateUrl: require('./bottomSheet.html')
}).then(() => {
// process form data
});
}
}
Now all I had to do was link it to the bottom sheet element.
<md-bottom-sheet ng-mousedown='disableDrag()'>
<!-- our form -->
</md-bottom-sheet>
Works like a charm.
