Mdbottomsheet disable drag down to close

I would like to disable drag and drop to close the mdbottomsheet gesture. I found work on scripts, but I'm not sure where to put the code. Thanks for the help.

+5
source share
3 answers

As you say, the angular material does not provide any option to disable it, obviously you will have to make changes to its source code.

Now you have not indicated whether you want to disable it in certain places or drag down-to-close for lower tables everywhere.

1) In the case of the latter, this would be quite simple, since you only need to remove the event listeners for the drag and drop events. If you use the angular -material.js file, then you can do:

Find the BottomSheet function (element, parent) . This function basically logs drag and drop events that close the sheet. We need them not to attach listeners.

Reduce it to:

function BottomSheet(element, parent){ return { element: element, cleanup: angular.noop }; } 

The cleanup function basically unregisters the listeners when dragging and dropping. This function is called when the bottom sheet area is destroyed. To make minimal changes, we simply reduced the cleanup function so as not to do anything.

2) If you want to pass an option when creating a sheet in your controller, you do the same, but conditionally based on the option that you pass. I will not write code because I assume that you know how angular works, but here are the steps:

=> Add a boolean along with other parameters (template, scope, etc.). Let's call it dragDownToClose .

=> In the default injector function inside the MdbottomSheet provider function, set it to the default value (true / false).

=> Pass this along with the element and parent while creating the BottomSheet () inside the onShow function.

=> So, BottomSheet () now has three arguments: dragDownToClose is new.

=> As in the first case, return the element without attaching a handler when the value is false, and let the original function be equal to its true value.

Of course, there are various ways in which you can actually implement this. However, I hope you have an idea.

+3
source

First enter $element in your controller. You know what an AngularJS $ element does, right?

Then we both know that drag events are recorded in the BottomSheet

 parent.on('$md.dragstart', onDragStart) .on('$md.drag', onDrag) .on('$md.dragend', onDragEnd); 

So, a simple solution: delete these events, override these events ... without overriding the function BottomSheet , right?

  $element .on('$md.dragstart', function (ev) { return false; }) .on('$md.drag', function (ev) { return false; }) .on('$md.dragend', function (ev) { return false; }); 

Something else is wrong! The background is still being dragged! So we do the same for the background

 var parent = $element.parent(); var backdrop = parent.find('md-backdrop'); backdrop .on(blah blah blah 

This is the code in case you request

+1
source

You can try

 $mdBottomSheet.show({ template: *yourTemplate*, clickOutsideToClose:false }) 

this will prevent the user from closing the bottom sheet even when dragging or clicking from the outside.

0
source

Source: https://habr.com/ru/post/1262199/


All Articles