Disable $mdBottomSheet Drag Events

I recently ran into a situation where I needed to prevent an md-bottom-sheet component from dragging around. Inside the bottom sheet, we have an image cropper component (ui-cropper) which has it's own drag events. When we drag the cropper window up, the entire bottom sheet moves up with it. When we drag the cropper window down, the bottom sheet closes.

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() {
      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 -->

Works like a charm.