我们的需求是做一个可拖动的菜单,类似于苹果手机浮动的home按钮,整个页面内都是可以拖拽的。
现在的问题是我用了拖拽组件之后,设置了z-index是高于页面层级的,导致整个页面内部所有点击事件都不生效。
<view class="page"> 这里是页面所有内容的代码 page没有设置层级 所以被drag-wrap挡住 无法执行点击事件,如果设置page层级高于drag-wrap,则无法执行拖拽事件 </view>
< 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-wrap{ width : 100% ; height : 100% ; position : fixed ; z-index : 999 ; top : 0 ; } .drag-view{ width : 50px ; height : 50px ; } .menu-view{ width : 50px ; height : 50px ; background : orange; color : #fff ; line-height : 50px ; text-align : center ; border-radius: 50% ; position : absolute ; bottom : 0 ; right : 0 ; } |
在别处看到的,对我做的有效果。但是movable-area高度设置为100%后,会拖动到导航栏里面去,这怎么解决?
movable-area 上加 pointer-events: none。
movable-view 上加 pointer-events: auto。
老哥稳
乍一看以为是没什么用,结果加到css里还真的可以,想知道原理是什么
+1
你drag-wrap的宽和高没必要100%,浮动的菜单是多大就多大,浮动菜单接收touchStart、touchEnd、touchMove三个事件来控制菜单的位置。
如果drag-view宽高不设置100%,那movable-area 可拖拽范围启不就变了吗?
用fixed来控制菜单位置吖!~无需movable-area
或者监听手势事件,当手指在菜单上按下的时候,才将drag-view设置为100%,手指离开后变小。
API有句话是这个 ‘注意:movable-view必须在
<movable-area/>
组件中,并且必须是直接子节点,否则不能移动。’ 所以不太懂你说的无需movable-area是什么意思? 刚刚试了下监听手势,但是当touchend后按钮菜单又回回到原点,并不是我拖拽的位置。郁闷了。。。