收藏
回答

movable-view层级太高 导致页面事件无法点击

我们的需求是做一个可拖动的菜单,类似于苹果手机浮动的home按钮,整个页面内都是可以拖拽的。

现在的问题是我用了拖拽组件之后,设置了z-index是高于页面层级的,导致整个页面内部所有点击事件都不生效。

<view class="page">

这里是页面所有内容的代码 page没有设置层级 所以被drag-wrap挡住 无法执行点击事件,如果设置page层级高于drag-wrap,则无法执行拖拽事件

</view>

<!-- drag start -->

<view class="drag-wrap">
    <movable-area style="height: 100%; width: 100%; ">
      <movable-view class="drag-view" bindtap='changeBtnViewState' disabled="{{disabledMenu}}"  x="{{x}}" y="{{y}}" direction="all">
        <view class="menu-view">菜单</view>
        <view class="btn-view hide{{showBtnView?'show':''}}" >
            <button class="menu-btn btn-openApp" open-type="launchApp" app-parameter="wechat"        binderror="launchAppError">打开APP</button>
            <button class='menu-btn btn-goIndex'>首页</button>
        </view>
      </movable-view>
  </movable-area>
</view>

<!-- drag end -->



.drag-wrap{
  width:100%;
  height100%;
  positionfixed;
  z-index:999;
  top:0;
}
.drag-view{
  width:50px;
  height:50px;
}
.menu-view{
  width:50px;
  height:50px;
  background: orange;
  color:#fff;
  line-height50px;
  text-aligncenter;
  border-radius:50%;
  positionabsolute;
  bottom:0;
  right:0;
}



最后一次编辑于  2018-08-15  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • Asphyxia
    Asphyxia
    2018-08-26

    在别处看到的,对我做的有效果。但是movable-area高度设置为100%后,会拖动到导航栏里面去,这怎么解决?

    movable-area  上加 pointer-events: none。

    movable-view  上加 pointer-events: auto。


    2018-08-26
    赞同 4
    回复 2
    • Tim
      Tim
      2018-09-01

      老哥稳

      2018-09-01
      回复
    • 小位
      小位
      2018-09-05

      乍一看以为是没什么用,结果加到css里还真的可以,想知道原理是什么

      2018-09-05
      回复
  • 再见,电脑崽
    再见,电脑崽
    2018-08-15

    你drag-wrap的宽和高没必要100%,浮动的菜单是多大就多大,浮动菜单接收touchStart、touchEnd、touchMove三个事件来控制菜单的位置。

    2018-08-15
    赞同
    回复 4
    • Zero
      Zero
      2018-08-15

      如果drag-view宽高不设置100%,那movable-area 可拖拽范围启不就变了吗?

      2018-08-15
      回复
    • 再见,电脑崽
      再见,电脑崽
      2018-08-16回复Zero

      用fixed来控制菜单位置吖!~无需movable-area

      2018-08-16
      回复
    • 再见,电脑崽
      再见,电脑崽
      2018-08-16回复Zero

      或者监听手势事件,当手指在菜单上按下的时候,才将drag-view设置为100%,手指离开后变小。

      2018-08-16
      回复
    • Zero
      Zero
      2018-08-16

      API有句话是这个 ‘注意:movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动。’  所以不太懂你说的无需movable-area是什么意思?  刚刚试了下监听手势,但是当touchend后按钮菜单又回回到原点,并不是我拖拽的位置。郁闷了。。。

      2018-08-16
      回复
  • 啊胖
    啊胖
    2018-08-15

    +1


    2018-08-15
    赞同
    回复