【问题标题】:mdbottomsheet disable drag down to closemdbottomsheet 禁用向下拖动关闭
【发布时间】:2017-01-03 05:04:05
【问题描述】:

我想禁用 mdbottomsheet 的向下拖动以关闭手势。我找到了关于脚本的解决方法,但我不确定将代码放在哪里。感谢您的帮助。

【问题讨论】:

  • @Sajeetharan 我也有这个问题,这是代码:jsfiddle.net/plosives/pLL7e9kv/5,谢谢关注。
  • 请添加您目前拥有的内容以及您放置此代码的位置。此外,您当前的文件结构将有助于确定放置此代码的最佳位置。
  • @alphapilgrim 我只想禁用向下拖动以关闭 mdbottomsheet,这对我来说不管放在哪里!如果angular-material 没有任何选项来禁用向下拖动,我该如何覆盖angular-material?非常感谢

标签: angularjs material-design angular-material


【解决方案1】:

正如你所说,angular-material 没有提供任何禁用它的选项,显然你必须对其源代码进行更改。

现在,您还没有提到是要在特定位置禁用它还是要在任何地方为 bottomSheets 启用向下拖动关闭。

1) 在后者的情况下,这将非常简单,因为您唯一需要做的就是删除拖动事件的事件侦听器。 如果您使用 angular-material.js 文件,您可以执行以下操作:

找到函数BottomSheet(element, parent)。这个函数基本上注册了关闭工作表的拖动事件。我们需要让它不附加监听器。

将其简化为:

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

清理函数基本上是在拖动事件时取消注册监听器。当底部表的范围被破坏时调用此函数。为了进行最小的更改,我们只是将清理功能减少到什么都不做。

2) 如果您希望能够在控制器中创建工作表时传递一个选项,您可以执行相同的操作,但有条件地基于您传递的选项。不会编写代码,因为我假设您知道 Angular 是如何工作的,但步骤如下:

=> 添加一个布尔变量以及其他选项(模板、范围等)。我们称之为 dragDownToClose

=> 在 MdbottomSheet 的提供程序函数内的默认注入器函数中,为其分配一个默认值(true/false)。

=>在 onShow 函数内的 BottomSheet() 实例化期间将其与元素和父级一起传递。

=> 所以 BottomSheet() 现在将有三个参数 - dragDownToClose 是新参数。

当然,您可以通过多种方式实际实现这一点。不过,我希望你能明白。

【讨论】:

  • 谢谢你,Devesh,你没事。但我不会修改angular-material.js 文件!我想在我的项目中添加一个js 文件并覆盖BottomSheet 函数以禁用向下拖动关闭。 @Devesh Sati
【解决方案2】:

首先,将$element 注入您的控制器。你知道 AngularJS $element 做什么,对吧?

然后我们都知道拖动事件注册在BottomSheet

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

所以,简单的解决方案是:删除那些事件,覆盖那些事件...而不覆盖 function BottomSheet,对吧?

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

这里还是有问题!背景仍然可以拖动!所以,我们对背景做同样的事情

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

这些是code,以防您要求

【讨论】:

    【解决方案3】:

    你可以试试

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

    即使在外部拖动或点击,用户也不会关闭底部工作表。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-07-06
      • 2022-08-10
      • 1970-01-01
      • 1970-01-01
      • 2014-11-23
      • 1970-01-01
      • 2019-11-12
      • 2019-10-25
      相关资源
      最近更新 更多